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

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

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

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

提琴手

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

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

笔记：

你有什么理由想要使用addEventListener而不是仅仅onClick为你的按钮传递一个属性吗？除非有特殊的充分理由，否则我建议在处理事件时以react方式做事以保持理智:)

编辑

我最初提到我不知道TestUtils'SimulateNative.click没有触发事件。我认为它会一直是错误的，因为它会在react甚至系统中模拟本机点击事件。@thilo 为我指明了正确的方向:)

我在测试 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