DEV Community
·
在Webpack中配置Jest和React Testing Library
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文介绍了在Webpack项目中配置Jest和React Testing Library的步骤，包括安装依赖、配置Babel、创建Jest配置文件、处理CSS模块、编写测试文件、更新package.json脚本和运行测试，最后提到如何生成代码覆盖率报告。
🎯
关键要点
- 在Webpack项目中配置Jest和React Testing Library的步骤。
- 第一步：安装Jest和React Testing Library作为开发依赖。
- 第二步：确保Babel正确配置以与Jest配合使用。
- 第三步：创建Jest配置文件jest.config.js。
- 第四步：安装处理CSS模块和Jest转换所需的额外依赖。
- 第五步：创建测试文件，命名为*.test.js或*.test.tsx。
- 第六步：在package.json中添加运行测试的脚本。
- 第七步：确保Webpack配置支持CSS模块和Jest兼容性。
- 第八步：运行测试以验证设置是否正确。
- 第九步：可选：添加代码覆盖率报告以检查未测试的代码部分。
❓
延伸问答
如何在Webpack项目中安装Jest和React Testing Library？
使用命令npm install --save-dev jest @testing-library/react @testing-library/jest-dom安装Jest和React Testing Library作为开发依赖。
如何配置Babel以与Jest配合使用？
在babel.config.js或.babelrc文件中添加或更新配置，确保包含"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]。
Jest的配置文件应该如何创建？
在项目根目录创建jest.config.js文件，内容包括测试环境设置和模块名称映射等配置。
如何在package.json中添加测试脚本？
在package.json的"scripts"部分添加"test": "jest"，以便通过npm test运行测试。
如何确保Webpack支持CSS模块？
在Webpack配置中添加相应的规则，确保处理.css和.scss文件，并设置模块选项。
如何生成代码覆盖率报告？
在Jest配置中启用代码覆盖率，添加collectCoverage和collectCoverageFrom选项，然后运行npm test -- --coverage。
➡️
