.simulate('click') 仅在通过 ID 和 Class 在同一个组件上完成两次时才有效

Question

我已经解决了现有问题，但找不到与此类似的问题。

我有一个像这样的按钮元素，它位于<Contact/>我正在测试的组件中：

<div>
...
<button id="Contact-button-submit" className="btn btn-primary btn-lg" onClick={this.handleSubmit}>Submit</button>
...
</div>

这是我的测试：

it('calls handleSubmit when Submit button is clicked', () => {
    let wrapper = shallow(<Contact {...mockProps} />);
    wrapper.instance().handleSubmit = jest.fn();
    let { handleSubmit } = wrapper.instance();
    expect(handleSubmit).toHaveBeenCalledTimes(0);
    wrapper.find('#Contact-button-submit').simulate('click'); // the only simulate click I want
    wrapper.find('.btn-primary').simulate('click'); // the simulate click I also had to add
    expect(handleSubmit).toHaveBeenCalledTimes(1);
});

有趣的是，当我只包含第一个模拟点击（ID 一个）时，测试在最后一次期望时失败。永远不会调用 onClick 函数 (handleSubmit)。但是当我添加使用 className 的第二个时，它通过了。

似乎他们都需要在场。如果删除一个，它将失败。

是否有任何已知的原因？我正在挠头。

Answer 1

我的解决方案是使用jest.spyOn

it('calls handleSubmit when Submit button is clicked', () => {
    const handleSubmit = jest.spyOn(Contact.prototype, 'handleSubmit');
    let wrapper = shallow(<Contact {...mockProps} />);
    expect(handleSubmit).toHaveBeenCalledTimes(0);
    wrapper.find('#Contact-button-submit').prop('onClick')();
    expect(handleSubmit).toHaveBeenCalledTimes(1);
});

问题是我在浅层渲染之后对方法进行了存根处理，而实际上我之前需要这样做。