背景
Jest 是由 Facebook 开发的一个 JavaScript 测试框架，可以用于测试 React、Vue、Angular 等前端框架的代码。在使用 Jest 进行前端单元测试时，通常需要使用 Webpack 进行模块打包，以便能够正确地解析 ES6 模块、CSS、图片等资源。然而，Jest 在 Webpack 环境下的配置并不是非常简单，还需要注意一些坑点，本文将介绍 Jest 在 Webpack 环境下的配置和踩坑经验，以便读者能够更好地使用 Jest 进行前端单元测试。
Jest 的基本配置
首先，我们需要在项目中安装 Jest：
npm install --save-dev jest
然后，我们可以在项目根目录下创建一个 jest.config.js 文件，用于配置 Jest。例如，我们可以配置 Jest 来解析 ES6 模块、CSS、图片等资源：
-- -------------------- ---- ------- -------------- - - ------- ---------------------- ----------------------- - ----------------- -------- -- ------------------- - ------------------------- -- ----------------- - ---------- ----------------------- ---------- ---------------------------------- -- ---------- - ---------------------- ------------- ------------- ------------------------------------------ ----------------------------- ----------------------------------------- - --展开代码
其中，preset 可以指定预设，例如 jest-preset-angular，testPathIgnorePatterns 可以指定测试文件路径的忽略规则，setupFilesAfterEnv 可以指定测试前需要运行的文件，例如 jest-setup.ts。moduleNameMapper 可以指定模块名称的映射关系，例如 @/ 映射到 src/app/，.css 映射到 __mocks__/styleMock.ts，表示对 CSS 文件进行 mock。transform 可以指定代码转换的规则，例如将 .ts、.js、.html 文件转换成 ES5 代码，.css 文件转换成一段 styleMock.ts 文件中的代码（用于解决 Jest 对 CSS 文件无法处理的问题），图片文件转换成 URL。
Webpack 的配置
接着，我们需要为 Jest 配置 Webpack。我们可以在 jest.config.js 中添加 webpack 配置选项：
-- -------------------- ---- ------- -------------- - - -- --- -------- - ---------- - --------- ------------------------------- ------------ ----- -- ------------------- ---- -- -- --- -------- - ------- - ------ - - ----- -------- ------- ------------ -------- - -------------- ---- - -- - ----- ------------ ------- ------------- -- - ----- ------------------------- ------- -------------- -------- - ----- --------------- ----------- ---------------- --------- ------ - -- - ----- ----------- ------- ------------- -------- - --------- ------ - - - -- -------- - ----------- ------- ------ ------- - - --展开代码
其中，我们指定了 TS 编译选项，options.transpileOnly 表示我们将禁用 TypeScript 的类型检查，以便加速测试。globals.__TRANSFORM_HTML__ 表示我们将启用 Jest 的 HTML 转换器，用于处理 Angular 中的模板文件。
在 jest.config.js 中，我们还添加了 webpack 配置选项，用于指定 Webpack 的模块规则和文件扩展名。例如，我们将 .ts、.js、.css 文件扩展名添加到了解析列表中，并为它们指定了相应的 loader。在加载 CSS 文件时，我们将使用 css-loader 来解析 CSS，并禁用 esModule 选项，这是因为 Jest 对 esModule 支持不完善，可能会导致 CSS 加载失败的问题。在加载图片文件时，我们将使用 file-loader，并指定输出路径为 assets/images。
踩坑经验
在使用 Jest 进行前端单元测试时，还需要注意一些坑点。下面，我总结了一些常见的踩坑经验，供读者参考：
1. Jest 对 CSS 支持不完善
Jest 对 CSS 文件的支持不完善，可能会导致测试失败。解决方法是使用 css-loader 将 CSS 文件转换为 JavaScript 代码，并使用 styleMock.ts 来 mock CSS 文件。
2. Webpack Dev Server 会导致测试执行失败
如果在运行测试时同时启动了 Webpack Dev Server，那么测试可能会执行失败，因为 Jest 使用的是 Webpack，而 Webpack Dev Server 在同一端口监听请求，可能会与 Jest 冲突。解决方法是将 Webpack Dev Server 的端口号改为与 Jest 不同的端口。
3. 模块路径问题
在测试中，不同的模块可能位于不同的目录中，可能会导致模块路径问题。解决方法是使用 Jest 提供的路径别名功能，将模块名称映射为实际的路径。例如，@/ 映射到 src/app/。
4. HTML 模板问题
在使用 Angular 进行开发时，通常会使用 .html 文件作为模板文件。这些文件可能会包含一些变量或指令，需要在运行时才能正常解析。解决方法是使用 Jest 的 HTML 转换器，将 HTML 文件转换为 JavaScript 代码，并在测试中使用转换后的代码。
总结
Jest 在 Webpack 环境下的配置和踩坑经验十分重要，在进行前端单元测试时需要谨慎对待。本文介绍了 Jest 和 Webpack 的基本配置和常见问题，希望能帮助读者更好地使用 Jest 进行前端单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5737a48841e98941fd883
