如何使用react测试库在自定义组件上触发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测试库如何获得这个组件并触发一个onChange事件呢？我试图找到一些类似于getByComponentName或类似的功能，但没有成功。

Answer 1

在RTL中，你并不是真的那么做。

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

一些第三方组件可能很难用这种方法进行测试，因为它们有一个您无法控制的内部结构。在这种情况下，我建议你直接嘲弄他们。最后，它们已经由维护人员进行了测试。

在您的示例中，您可以使用jest.mock并呈现一个textarea，而不是您的编辑器。