23

考虑 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？

4

3 回答 3

16

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

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

dispatchEvent另一方面，该函数将创建一个“本机”浏览器事件。但是您拥有的事件处理程序是由 react 管理的，因此只会对 reacts 做出反应（badumts）SyntheticEvents。

你可以在这里阅读反应事件：https ://facebook.github.io/react/docs/events.html

于 2016-08-21T16:38:47.063 回答
16

一种方法可以做到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);

查看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);
  }
于 2017-07-27T17:02:43.190 回答
2

我仅为输入元素创建了一个小版本的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);
      }
};
于 2021-01-11T10:29:24.243 回答