DEV Community
·
如何将 @testing-library 与 @web/test-runner 一起使用
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
Web Test Runner和Testing Library很优秀，但当前版本与ES模块不完全兼容。可以通过esbuild准备测试模块，并使用import maps配置web-test-runner，以确保在浏览器中正常运行。
🎯
关键要点
- Web Test Runner和Testing Library都很优秀。
- 当前版本的Testing Library与ES模块不完全兼容。
- 可以使用esbuild准备测试模块，以确保它们在浏览器中正常运行。
- 安装Web Test Runner和Testing Library的命令。
- 使用esbuild命令输出兼容的esmodule文件。
- 可以通过import maps配置web-test-runner，以映射导入令牌到特定文件。
- 未来理想情况下不需要这种配置，但目前这是一个有效的解决方案。
❓
延伸问答
如何安装Web Test Runner和Testing Library？
可以使用命令：npm i -D @web/test-runner @web/dev-server-import-maps @testing-library/dom @testing-library/user-event。
为什么Testing Library与ES模块不完全兼容？
当前版本的Testing Library与ES模块不完全兼容，这是一个已知的问题。
如何使用esbuild准备测试模块？
可以运行命令：./node_modules/@testing-library/* --bundle --outdir=testing-library --format=esm，以输出兼容的esmodule文件。
什么是import maps，它们如何配置web-test-runner？
Import maps允许浏览器将特定的导入令牌映射到特定文件，可以通过配置importMapsPlugin来实现。
未来是否还需要使用import maps进行配置？
理想情况下，未来不需要这种配置，但目前这是一个有效的解决方案。
Web Test Runner和Testing Library的优点是什么？
Web Test Runner和Testing Library都是优秀的工具，能够提升测试的效率和效果。
➡️
