reactjs - 如何使用 React 测试库测试 `contenteditable` 事件
问题描述
我正在尝试为我们的富文本组件之一编写测试,该组件是在 react js 中使用 slate js 编辑器实现的。因此,在编写测试时,我正在检索元素 div[contenteditable='true'],但无法模拟变化、模糊、焦点等事件。附加到编辑器组件的处理程序不会被调用。我尝试了多种组合,但没有运气。有人可以帮忙吗?是否可以使用测试库模拟 contenteditable 元素的事件(contenteditable 是使用 slatejs 实现的)?
解决方案
就像您发现contenteditable
的那样,JSDOM 不支持。React 测试库 (RTL) 构建在 JSDOM 之上,因此在 JSDOM 实现对contenteditable
.
将浏览器自动化库与测试库一起使用
然后,您的选择是使用创建真实浏览器上下文的工具。测试库与许多可以做到这一点的工具集成:TestCafe、Cypress、Nightwatch、Puppeteer。
您也可以自行使用上述工具,无需测试库。
我已经使用 Puppeteer 解决了这个问题,有两种方法:
- 运行本地服务器并告诉 Puppeteer 去类似的东西
localhost:3000
- 直接设置内容
page.setContent(htmlString)
(1) 是最常见的,您会发现很多指南,因为它是端到端测试的常用方法(谷歌搜索)。
(2) 有点棘手,因为您必须为每个测试转换和捆绑源代码,然后将其作为 HTML 注入浏览器页面。我更喜欢这种方法,因为测试体验更类似于使用 RTL。我在这里使用 Slate 编辑器创建了一个带有此设置示例的存储库:https ://github.com/marcusstenbeck/puppeteer-react-testing-template/
推荐阅读
- react-native - 为什么 React Native 中的 post 请求无法发送?
- python - 如果我使用 github 在 Heroku 上部署我的 Twitch 机器人,当变量在使用时被编辑时,这是否反映在 github 代码中?
- html - HTML 规范中的文档树子浏览上下文是什么?
- typescript - 出现错误信息 TypeError: this.subQuery is not a function
- c++ - Rand() command generates the same numbers every time
- javascript - Create and save PDF to server from a pdf base 64 string
- python - 如何使用 Python 在特定表中搜索特定值并从另一个表返回匹配响应
- visual-studio-code - Makrdown link in vscode extension hover to file:line not working over remote-ssh
- python - Slicing a 3-dimension tensor
- automation - sikulix is there any way to run it independently in the background of a machine?