Question

以下是示例：

它在虚拟dom中绑定onClick时很有用（如第18行），但如果我对第18行进行注释并在第8行注释以使用addEventListener绑定点击，则失败。

那么问题是什么？

Answer 1

TestUtils触发react的合成事件系统中的事件，因此addEventListener侦听的本机事件永远不会被触发。您需要在测试中的元素上使用本机click方法：

    var events = Events();
    ReactTestUtils.renderIntoDocument(events);
    events.refs.button.getDOMNode().click();

    events.state.event.should.equal('click');

此外，您clickHandler定义中的addEventListener拼写错误。

<强> jsfiddle

您还可以通过重复使用支柱定义来简化添加事件监听器：

componentDidMount: function () {
    this.refs.button.getDOMNode().addEventListener('click', this.clickHandler);
},

注意：

您是否有理由使用addEventListener而不是仅为您的按钮传递onClick属性？除非有特定的理由，否则我建议在处理事件时采取反应方式：＃）

修改

我最初提到我不知道TestUtils＆＃39; SimulateNative.click没有触发此事件。我错误地认为它会在反应甚至系统中模拟本机点击事件。 @thilo指出我正确的方向：）

Answer 2

我在测试addEventListener时遇到了很多问题，我得出以下结论。

您可以使用纯javascript，jquery创建事件侦听器，但是当使用Jest运行测试时，我总是遇到问题。

ReactTestUtils的呈现不能直接与文档一起使用，当我们这样做时：

例如，我们的事件已添加到文档中，当使用ReactTestUtils渲染时，它会创建一个div并将其呈现在div中，这样我就无法让Simulate触发调用。

我的第一个解决方案是使用jquery创建监听器并测试我通过在document.body中附加div来手动执行渲染，并使用javascript的dispachEvent触发事件。但我认为代码很脏，不是最好的工作方式。

我通过添加事件并使用Jest测试来制作示例代码，还有一个测试教学来获取所有已创建的监听器。

您可以在此处找到代码：https://github.com/LVCarnevalli/create-react-app/tree/master/src/components/datepicker

组件：

componentDidMount() {   
 ReactDOM.findDOMNode(this.datePicker.refs.input).addEventListener("change", (event) => {
    const value = event.target.value;
    this.handleChange(Moment(value).toISOString(), value);
  });
}

测试：

it('change empty value date picker', () => {
    const app = ReactTestUtils.renderIntoDocument(<Datepicker />);
    const datePicker = ReactDOM.findDOMNode(app.datePicker.refs.input);
    const value = "";

    const event = new Event("change");
    datePicker.value = value;
    datePicker.dispatchEvent(event);

    expect(app.state.formattedValue).toEqual(value);
});

链接：

window.addEventListener未被模拟事件触发： https://github.com/airbnb/enzyme/issues/426

创建和触发事件： https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

ReactTestUtils.Simulate不能通过addEventListener触发事件绑定？

2 个答案:

修改