Testing reactestutils.Simulate can'；是否通过addEventListener触发事件绑定？

以下是一个例子：

它只是在虚拟dom中的bind

onClick

时起作用（如第18行），但如果我用

addEventListener

注释第18行和注释第8行以绑定，它就会失败

---

那么问题出在哪里呢？

TestUtils在react的合成事件系统中触发事件，因此，

addEventListener

侦听的本机事件永远不会被触发。您需要在测试中的元素上使用本机

单击
方法：

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

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

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


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

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

注意：

您想使用
addEventListener
而不是只为按钮传递
onClick
属性，这有什么原因吗？除非另有明确和充分的理由，否则我建议在处理事件时以反应的方式行事，以保持理智：）

编辑
我最初提到，我不知道TestUtils’没有触发事件的是什么。我认为这是错误的，因为它将模拟react-偶数系统中的本地点击事件@thilo为我指出了正确的方向：）
我在测试addEventListener时遇到了很多问题，我得到了以下结论

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

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

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

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

我通过添加事件并使用Jest对其进行测试生成了一个示例代码，还进行了一个测试教学，以获取创建的所有侦听器

您可以在此处找到代码：

组成部分：

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

测试：

it（'更改空值日期选择器'，（）=>{
const app=reactestutils.renderIntoDocument（）；
const datePicker=ReactDOM.findDOMNode（app.datePicker.refs.input）；
常量值=”；
常量事件=新事件（“变更”）；
datePicker.value=值；
datePicker.dispatchEvent（事件）；
expect（app.state.formattedValue）.toEqual（value）；
});

链接：

window.addEventListener未被模拟事件触发：

创建和触发事件：
感谢您的回答，指出react的合成事件系统非常有帮助。我对您上一次提到的
SimulatedActive有点困惑。单击
，这是不是意味着
SimulatedActive。单击
可以触发本机事件，而不是
Simulate。单击
仅触发react的合成事件系统内的事件？关于我为什么使用
addEventListener
。我定义了一个mixin，我想在mixin中绑定一些事件，而不是使用mixin在每个组件中手动绑定这些事件，并在一些触发的事件处理程序中动态绑定一些其他事件。有更好的方法吗？@hulufei
Simulated
只是通过react的合成事件系统发送一个“本机”事件，而不是一个“react”事件。所以它永远不会触发本机事件侦听器。至于在组件之间共享行为的方法，很难说不知道您想要实现什么。我将开始另一个SO问题。谢谢<代码>.dispatchEvent（事件）为我修复了它。
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);
});