gpt4 book ai didi

reactjs - 如何使用 React 测试库测试 `contenteditable` 事件

转载 作者:行者123 更新时间:2023-12-04 14:11:04 25 4
gpt4 key购买 nike

我正在尝试为我们在 react js 中使用 slate js 编辑器实现的富文本组件之一编写测试。因此,在编写测试时,我正在检索元素 div[contenteditable='true'],但无法模拟更改、模糊、焦点等事件。附加到编辑器组件的处理程序没有被调用。我尝试了多种组合,但没有运气。有人可以帮忙吗?是否可以使用测试库模拟 contenteditable 元素的事件(contenteditable 是使用 slatejs 实现的)?

最佳答案

就像您发现的那样,contenteditable JSDOM 不支持。 React 测试库 (RTL) 建立在 JSDOM 之上,因此在 JSDOM 实现对 contenteditable 的支持之前,不可能使用 RTL 正确测试 Slate 编辑器。 .
将浏览器自动化库与测试库一起使用
然后,您的选择是使用创建真实浏览器上下文的工具。测试库与许多工具集成,可以做到这一点:TestCafe , Cypress , Nightwatch , Puppeteer .
您也可以自行使用上述工具,无需测试库。
我已经使用 Puppeteer 解决了这个问题,有两种方法:

  • 运行一个本地服务器并告诉 Puppeteer 去类似 localhost:3000 的地方
  • 直接用page.setContent(htmlString)设置内容

  • (1) 是最常见的,您会找到很多这方面的指南,因为它是端到端测试的常用方法 ( google search )。
    (2) 有点棘手,因为您必须为每个测试转换和捆绑源,然后将其作为 HTML 注入(inject)浏览器页面。 我更喜欢这种方法,因为测试体验更类似于使用 RTL。 我在此处使用 Slate 编辑器创建了一个包含此设置示例的存储库: https://github.com/marcusstenbeck/puppeteer-react-testing-template/

    关于reactjs - 如何使用 React 测试库测试 `contenteditable` 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64340504/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com