Jest-тест не пройден и не получен toHaveBeenCalled от симулированного клика - PullRequest
Новая
       38

Jest-тест не пройден и не получен toHaveBeenCalled от симулированного клика

0 голосов
/ 22 марта 2020

У меня проблема с тестом Jest с использованием React. Я также использую фермент. Кроме того, я использую Redux.

Если вы видите тест шутки ниже, вы увидите два смоделированных клика. Причиной для двух смоделированных кликов в моем тесте ниже является то, что входы внутри проверки "showAddItem" скрыты. Нажатие на «div # add_item» позволяет увидеть этот div. После этого нажатие на «input # add_item_submit» должно вызвать addItemToWatchList.

В моем тестировании с использованием отладчика и запуском тестов первый смоделированный щелчок устанавливает для свойства showAddItem значение true. Это позволяет входу "add_item_submit" быть доступным в DOM. После этого показывается, что второй имитированный щелчок в тесте не срабатывает, потому что addItemToWatchList не вызывается. Результат моего теста: 

    Expected number of calls: >= 1
    Received number of calls:    0

соответствующий код компонента реакции: 

{ this.state.showAddItem ? <div>
   <input type="text" name="watchListItem" value={this.state.watchListItem} 
     onChange={this.handleInputChange}></input><br />
   <input type="submit" id="add_item_submit" value="Add Item" 
     onClick={ () => this.addItemToWatchList()}/>
  </div> : null }

соответствующий тест Jest / энзим 

it('should call addItemToWatchList when adding a item', () => {
  const initialState = { userReducer: {user: { id: 1, email: "test@test.com"}} }
  const mockStore = configureStore([]);
  const store = mockStore(initialState);
  const component = mount(<Provider store={store}>
      <AddItem />
  </Provider>);
  const mockedAddItemToWatchList = jest.fn();
  component.instance().addItemToWatchList = mockedAddItemToWatchList
  //sets state to showAddItem to true
  component.find('div#add_item').simulate('click')
  component.find('input#add_item_submit').simulate('click')
  expect(mockedAddItemToWatchList).toHaveBeenCalled()
});

Просто примечание, я также попытался сделать jest.spyOn без какой-либо удачи.

1 Ответ

0 голосов
/ 22 марта 2020

component.instance () может возвращать экземпляр Provided. Вы можете попробовать подключить AddItem напрямую, посмеиваясь над его внутренним поведением метода. 

  const component = mount(
      <AddItem />);
...