玩笑测试失败，并且未收到模拟点击产生的toHaveBeenCall

Question

我在使用React进行Jest测试时遇到问题。我也正在使用酶。另外，我正在使用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 }

相关的笑话/酶测

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，也没有任何运气。

Answer 1

component.instance（）可能返回Provided的实例。您可以尝试通过模拟其内部方法行为直接安装AddItem。

  const component = mount(
      <AddItem />);