对于前端开发而言，Jest 是一款非常流行的单元测试框架。然而，当我们在编写单元测试的时候，往往需要依赖于 Webpack 的配置，比如处理一些 SCSS 文件、图片等。那么，在 Jest 中如何解决对 Webpack 配置的依赖呢？本文将为大家进行详细的介绍，并提供具有实用价值的示例代码。
使用 jest-transformer-webpack
解决 Jest 中对 Webpack 配置的依赖的方法之一是使用 jest-transformer-webpack。它是一个 Jest 转换器，可以使我们在测试执行期间像在 Webpack 中一样处理模块和资源。
首先，我们需要安装和配置 jest-transformer-webpack。可以通过如下命令安装 jest-transformer-webpack：
npm install jest-transformer-webpack --save-dev
安装完成后，我们需要将 jest-transformer-webpack 添加到 transform 选项中，即在 jest.config.js 中进行如下配置：
module.exports = { transform: { "^.+\\.(js|jsx)$": "babel-jest", "^.+\\.(scss)$": "jest-transformer-webpack" } }
如上所示，我们将 .scss 文件转换为 jest-transformer-webpack 中转换后的代码。在这里，可以看出 jest-transformer-webpack 可以帮助我们在单元测试中像在 Webpack 中一样处理模块和资源，从而让我们处理依赖的配置更加便捷。
自己编写处理器
除了使用 jest-transformer-webpack，我们还可以自己编写处理器来解决这个问题。具体方法是，在 jest.config.js 文件中添加 moduleNameMapper 配置，将需要处理的模块名映射到相应的模块中，然后在模块中编写转换代码。
下面我们以处理 scss 文件为例，来演示使用自己编写处理器的方法。
首先，我们需要在 jest.config.js 中添加如下配置：
-- -------------------- ---- ------- -------------- - - ----------------- - --------------------------- --------------------- ------------------------ ---------------------- ----------- ------------------- ----------------- -------------------------- ----------------- -------------------------- -- ---------- - ------------------ ------------- -- -展开代码
如上所示，我们添加了一个 moduleNameMapper 配置，用来将需要处理的模块映射到相应的模块中。其中，我们将所有和 css、less、sass、scss 相关的文件都映射到 identity-obj-proxy 这个模块中，将所有图片文件都映射到 jest-transform-stub 中。
接下来，我们需要编写一个转换器来处理 scss 文件中需要用到的一些变量、函数等。比如我们可以编写一个 scssTransform.js 文件，内容如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - -------------- -------------- - - -------- ----- --------- -- - ----- ------ - ----------------- ----- --------- --- ------ ---------------------- -- --展开代码
如上所示，我们使用 sass 模块将 scss 文件转换为 css 文件，然后将生成的 css 文件 return 回来即可。
最后，在我们的测试文件中引入相应的 scss 文件即可。比如我们可以编写一个 test.scss 文件如下：
$theme-color: #f00;
然后在测试文件中就可以通过如下方式使用：
import '../path/to/test.scss';
通过这种方式，我们可以在 Jest 中解决对 Webpack 配置的依赖。当然，这只是其中一种方法，其他方法请大家自行探索。在使用过程中，我们可以根据自己的情况选择最适合自己的方案，从而让单元测试更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9d984e46428fe9e1b28c1
