ReactTestUtils.Simulate无法通过addEventListener触发事件绑定？

Question

这是一个例子：

http://jsfiddle.net/hulufei/twr4thuh/7/

它只是在虚拟dom中绑定onClick时工作（如第18行），但如果我对第18行进行注释并在第8行注释以使用addEventListener绑定click，则失败。

所以有什么问题？

Answer 1

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

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

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

此外，您在addEventListener定义中拼错了clickHandler 。

的jsfiddle

您还可以通过重用prop定义来简化添加事件侦听器：

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

注意：

您是否有理由想要使用addEventListener而不是仅为按钮传递onClick属性？ 除非有其他特定的理由，否则我建议在处理事件时采取反应方式以保持理智:)

编辑

我最初提到我不知道TestUtils的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