无法使用slatejs编辑器的React Testing libray模拟事件 将浏览器自动化库与测试库结合使用

问题描述

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

解决方法

就像您发现的那样，JSDOM 不支持 contenteditable。 React 测试库 (RTL) 构建在 JSDOM 之上，因此在 JSDOM 实现对 contenteditable 的支持之前，无法使用 RTL 正确测试 Slate 编辑器。

将浏览器自动化库与测试库结合使用

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

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

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

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

(1) 是最常见的，您会找到很多这方面的指南，因为它是端到端测试 (google search) 的常用方法。

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