为什么不在 dispatchEvent 上调用 React 事件处理程序？

Question

考虑 React 组件中的以下输入元素：

<input onChange={() => console.log('onChange')} ... />

在测试 React 组件时，我正在模拟用户更改输入值：

input.value = newValue;
TestUtils.Simulate.change(input);

这会导致 'onChange' 被记录，正如预期的那样。

但是，当 'change' 事件被直接调度时（我使用的是 jsdom）：

input.value = newValue;
input.dispatchEvent(new Event('change'));

未调用 onChange 处理程序。

为什么？

我使用 dispatchEvent 而不是 TestUtils.Simulate 的动机是因为 TestUtils.Simulate 不支持事件冒泡，而我的组件的行为依赖于此。我想知道是否有一种方法可以在没有 TestUtils.Simulate 的情况下测试事件？

Answer 1

React 使用自己的事件系统 SyntheticEvents（防止浏览器不兼容并给予 React 更多的事件控制）。

正确使用 TestUtils 会创建这样一个事件，它将触发您的 onChange 侦听器。

另一方面，dispatchEvent 函数将创建一个 "native" 浏览器事件。但是你拥有的事件处理程序是由反应管理的，因此只反应（badumts）反应 SyntheticEvents.

您可以在此处阅读有关反应事件的信息：https://facebook.github.io/react/docs/events.html

Answer 2

没有ReactTestUtils.Simulate的一种方法：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/react-trigger-change/dist/react-trigger-change.js';
document.head.appendChild(script);
input.value = value;
reactTriggerChange(input);

查看 source of react-trigger-change 以挑选需要的内容。示例片段：

if (nodeName === 'select' ||
    (nodeName === 'input' && type === 'file')) {
    // IE9-IE11, non-IE
    // Dispatch change.
    event = document.createEvent('HTMLEvents');
    event.initEvent('change', true, false);
    node.dispatchEvent(event);
  }

Answer 3

我只为输入元素创建了一个 https://github.com/vitalyq/react-trigger-change 的小版本。

没有外部依赖，复制粘贴即可。

适用于 React 16.9，已使用 Safari (14)、Chrome (87) 和 Firefox (72) 检查。

const triggerInputChange = (node: HTMLInputElement, inputValue: string) => {
      const descriptor = Object.getOwnPropertyDescriptor(node, 'value');

      node.value = `${inputValue}#`;
      if (descriptor && descriptor.configurable) {
        delete node.value;
      }
      node.value = inputValue;

      const e = document.createEvent('HTMLEvents');
      e.initEvent('change', true, false);
      node.dispatchEvent(e);

      if (descriptor) {
        Object.defineProperty(node, 'value', descriptor);
      }
};

为什么不在 dispatchEvent 上调用 React 事件处理程序？

Why React event handler is not called on dispatchEvent?

reactjs

reactjs-testutils