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

Question

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

Answer 1

正如您所发现的，contenteditableJSDOM 不支持它。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/