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