4

我正在使用这个组件:

<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或类似的功能,但没有成功。

4

1 回答 1

4

在 RTL 中,您并没有真正做到这一点。

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

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

在您的情况下,您可以使用jest.mock和渲染 atextarea而不是您的编辑器。

于 2019-02-07T09:07:22.357 回答