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（防止浏览器不兼容，并对事件做出更多控制）。

使用TestUtils正确创建了一个触发onChange监听器的事件。

另一方面，dispatchEvent函数将创建“本机”浏览器事件。但是你拥有的事件处理程序是通过反应来管理的，因此只会对（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事件处理程序？

3 个答案: