3

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

4

1 回答 1

3

就像您发现contenteditable的那样，JSDOM 不支持。React 测试库 (RTL) 构建在 JSDOM 之上，因此在 JSDOM 实现对contenteditable.

将浏览器自动化库与测试库一起使用

然后，您的选择是使用创建真实浏览器上下文的工具。测试库与许多可以做到这一点的工具集成：TestCafe、Cypress、Nightwatch、Puppeteer。

您也可以自行使用上述工具，无需测试库。

我已经使用 Puppeteer 解决了这个问题，有两种方法：

  1. 运行本地服务器并告诉 Puppeteer 去类似的东西localhost:3000
  2. 直接设置内容page.setContent(htmlString)

(1) 是最常见的，您会发现很多指南，因为它是端到端测试的常用方法（谷歌搜索）。

(2) 有点棘手，因为您必须为每个测试转换和捆绑源代码，然后将其作为 HTML 注入浏览器页面。我更喜欢这种方法，因为测试体验更类似于使用 RTL。我在这里使用 Slate 编辑器创建了一个带有此设置示例的存储库：https ://github.com/marcusstenbeck/puppeteer-react-testing-template/

于 2021-01-02T13:00:52.397 回答