我正在使用这个组件:
<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 或类似的函数,但没有成功。
最佳答案
在 RTL 中,你实际上不会这样做。
建议的方法是模拟用户会做什么。例如,如果 AceEditor
呈现 textarea
,您可以使用 fireEvent.change
来模拟用户输入。此时,您的组件将触发 onChange
事件并像在生产中一样使用react。
某些第 3 方组件可能很难使用此方法进行测试,因为它们具有您无法控制的内部结构。在这些情况下,我建议只是模拟它们。最后,它们已经由维护者进行了测试。
就您而言,您可以使用 jest.mock
并渲染 textarea
而不是编辑器。
关于javascript - 如何使用react-testing-library在自定义组件上触发onChange事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54483626/