如何使用 react-testing-library 在自定义组件上触发 onChange 事件？

Question

我正在使用这个组件：

<AceEditor
  value={data}
  className="code-editor"
  mode="json"
  theme="dracula"
  onChange={setData}
  name="data"
  height="320px"
  width="100%"
  editorProps={{ $blockScrolling: true }}
  showPrintMargin={false}
  highlightActiveLine={false}
/>

那么，使用 react-testing-library 如何获取此组件并触发 onChange 事件？我试图找到一些像 getByComponentName 或类似的函数，但没有成功。

Answer 1

在 RTL 中你不会真的那样做。

建议的方法是模拟用户会做什么。例如，如果 AceEditor 呈现 textarea，您可以使用 fireEvent.change 来模拟用户键入。届时，您的组件将触发 onChange 事件并像在生产中一样做出反应。

某些第 3 方组件可能很难使用此方法进行测试，因为它们具有您无法控制的内部结构。在这些情况下，我建议只是模拟它们。最后，他们已经被他们的维护者测试了。

在您的情况下，您可以使用 jest.mock 并呈现 textarea 而不是您的编辑器。

如何使用 react-testing-library 在自定义组件上触发 onChange 事件？

How to fire onChange event on custom components using react-testing-library?

javascript

reactjs

react-testing-library