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事件并像在生产中那样做出反应。

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

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

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

1 个答案: