DEV Community
·
如何将 @testing-library 与 @web/test-runner 一起使用
内容提要
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，以映射导入令牌到特定文件。
-
未来理想情况下不需要这种配置，但目前这是一个有效的解决方案。
延伸解读
兼容性问题的影响
当前版本的Testing Library与ES模块不完全兼容，这可能导致开发者在使用时遇到问题。了解这一点可以帮助开发者在选择工具时做出更明智的决策，避免在项目中引入潜在的兼容性风险。
使用esbuild的优势
通过使用esbuild准备测试模块，开发者可以确保其测试代码在浏览器中正常运行。这种方法不仅解决了兼容性问题，还能提高构建效率，是当前环境下的有效解决方案。
import maps的配置重要性
配置import maps对于确保Web Test Runner能够正确识别和加载Testing Library的模块至关重要。开发者应重视这一配置步骤，以避免在测试过程中出现模块未找到的错误。
延伸问答
如何安装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都是优秀的工具，能够提升测试的效率和效果。
