testing - ReactTestUtils.Simulate 无法通过addEventListener 触发事件绑定(bind)？

Question

例子如下:

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

它只是在虚拟 dom 中绑定(bind) onClick 时起作用(如第 18 行)，但是如果我注释掉第 18 行并注释掉第 8 行以使用 addEventListener 绑定(bind)点击，它失败了。

那么问题是什么？

Answer 1

TestUtils 在 React 的合成事件系统中触发事件，因此 addEventListener 监听的本地事件永远不会被触发。您需要在测试中的元素上使用 native 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 属性？除非有其他特定且充分的理由，否则我建议在处理事件时以 react 方式做事以保持理智:)

编辑

我最初提到我不知道 TestUtils 的 SimulateNative.click 是什么没有触发事件。我认为它会是错误的，因为它会在 React Even 系统中模拟 native 点击事件。 @thilo 给我指明了正确的方向:)