onClick Jest / энзим: метод «имитация» предназначен для запуска на 1 узле.0 найдено вместо - PullRequest
Новая
       9

onClick Jest / энзим: метод «имитация» предназначен для запуска на 1 узле.0 найдено вместо

0 голосов
/ 21 февраля 2019

Я не могу проверить onClick для следующего кода ниже.Я получаю следующую ошибку:

Method “simulate” is meant to be run on 1 node. 0 found instead.

Код моего компонента выглядит следующим образом: 

constructor (props) {
  super(props)
  this.state = INITIAL_STATE;
}

handleQuickFilter = (type) => {
  this.setState({
    quickFilterObj: {...this.state.quickFilterObj, [type]: {...this.state.quickFilterObj[type], checked: !this.state.quickFilterObj[type].checked}}
    }, () => {
      let filter = this.buildFilter();
      filter ? 
        linker.UniversalGrid('Counterparty.Loa.Enrollment', '', `{form_filter}=$filter=(${filter}),{grid_selectable}=1,{can_add}=1`) 
      :
        linker.UniversalGrid('Counterparty.Loa.Enrollment', '', `{form_filter}='',{grid_selectable}=1,{can_add}=1`)
  })
}

render () {
  return(
    <div className='enrollment-grid-wrapper'>   
      <div className='quick-filter-div'>
        <button className={this.state.quickFilterObj['New'] && this.state.quickFilterObj['New'].checked ? 'checked quick-filter' : 'unchecked quick-filter'} 
                id = 'testnew'
                onClick={() => {this.handleQuickFilter('New')}}
                >
            New {this.state.quickFilterObj['New'] && this.state.quickFilterObj['New'].count !== undefined ? `(${this.state.quickFilterObj['New'].count})` : null}
        </button>
        <button className={this.state.quickFilterObj['Sent'] && this.state.quickFilterObj['Sent'].checked ? 'checked quick-filter' : 'unchecked quick-filter'} 
                onClick={()=>{this.handleQuickFilter('Sent')}}
                >
            Sent {this.state.quickFilterObj['Sent'] && this.state.quickFilterObj['Sent'].count !== undefined ? `(${this.state.quickFilterObj['Sent'].count})` : null}
        </button>
  )
}

Я пробовал следующее, используя Jest / энзим: 

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  wrapper.find('.quick-filter-div').at(0).simulate("click");
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});

Как пройти следующий тест?

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Необходимо добавить возвращаемое обещание в вашу функцию jest.fn 

//mocking functions
getSelectedLOAs  = jest.fn( () => {
return new Promise((resolve, reject) => {
resolve()
})
});


it("should test click event NEW  method", () => {
wrapper.setProps({
});
wrapper.find('COMPONENT').setState({ 
  quickFilterObj:{
    New: {
      checked: true
    },
    Sent: {
      checked: true
    },

   }, } );
wrapper.update();
wrapper.find('#New-testclick').simulate("click");
wrapper.find('#Sent-testclick').simulate("click");
0 голосов
/ 21 февраля 2019

Поскольку вы используете модули CSS, ваш фактический отрисованный DOM не будет содержать div с классом quick-filter-div.Вместо этого класс будет что-то вроде quick-filter-div__012xyz.Из-за этого wrapper.find('.quick-filter-div') вернет 0 узлов.

Это можно проверить, поместив следующую строку в ваш тест сразу после строки setState: 

expect(wrapper.find('.quick-filter-div').exists()).toEqual(false)

Но этопохоже, что вы хотите проверить это щелчок button внутри вашего div.quick-filter-div.Разве это не правильно?В конце концов, обработчик onClick является опорой для button, а не div.

И, поскольку вашему button был присвоен идентификатор, вы можете сделать: 

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  const button = wrapper.find('button#testnew') // find button based on id selector
  expect(button.exists()).toEqual(true)         // make sure button is found
  button.simulate("click");                     // simulate click
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});

Если вы не дали идентификатор своей кнопке, но знали, что нажатие кнопки, которую вы хотите проверить, было первой кнопкой (а не второй), тогда вы можете попробовать: 

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  const buttons = wrapper.find('button')        // find all buttons
  expect(buttons).toHaveLength(2)               // make sure you found 2 buttons
  const button = buttons.at(0)                  // get the first button
  button.simulate("click");                     // simulate click
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});
...