Jest 是一套集成了断言、测试运行和文档生成等功能的 JavaScript 测试框架。它以速度快、易于学习、强大的功能等特点吸引了越来越多开发者的关注。但是，随着测试用例数量的增加，Jest 每次测试都重新编译的现象也越来越明显，这对开发效率和测试性能的提升都会造成一定的影响。
本文将介绍 Jest 每次测试都重新编译的原因，并提供一些解决这个问题的方法和技巧。
原因分析
Jest 总是在每次运行测试时重新编译测试代码，这是因为 Jest 的运行环境中使用了缓存机制。它会缓存运行时的所有代码，包括测试代码、被测试代码和依赖模块等。只有当缓存过期或者代码发生改变时，Jest 才会重新编译并运行测试代码。
在某些情况下，这种缓存机制是有益的，可以避免重复编译代码，提高测试运行速度。但是，在大型项目中，测试代码往往是动态变化的，即使有缓存机制，也无法避免每次都重新编译测试代码的情况。这会导致测试运行时间过长，甚至无法正常完成测试，对开发效率和质量也会造成一定的影响。
解决方法
为了解决 Jest 每次测试都重新编译的问题，我们可以采取以下几种方法：
1. 利用 JSDOM
Jest 默认使用 JSDOM 作为测试环境，它的缓存机制会影响测试运行速度。我们可以通过关闭 JSDOM 的缓存机制来解决这个问题。具体的配置可以在 jest.config.js 文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
----------------------- -
----------- --------------
---------- ---------
------------------- -
------ --------------------
------ ----------------------
---------------- - -----
------------- - -----
-
-
--这段代码将关闭 JSDOM 的缓存机制，同时也会关闭一些可能会影响测试结果的浏览器功能。
2. 利用 Jest 的缓存机制
如果我们认为在所有测试用例中都关闭缓存机制并不是一个好的解决方法，我们可以利用 Jest 的缓存机制来实现快速测试。
在 jest.config.js 文件中添加如下代码：
module.exports = {
cache: true,
};这段代码将启用 Jest 的缓存机制，只有当代码发生改变时才会重新编译并运行测试。这样可以大大减少测试运行时间，提高测试效率。
3. 利用 Webpack
Webpack 是前端开发中常用的打包工具，它也可以帮助我们解决 Jest 每次测试都重新编译的问题。
首先，我们需要在项目中安装 jest-webpack 插件：
npm install --save-dev jest-webpack
然后，在 jest.config.js 文件中添加如下代码：
module.exports = {
preset: "jest-webpack",
};这段代码会使用 Webpack 作为测试的编译器，而不是 Jest 的默认编译器。这样可以利用 Webpack 的缓存机制，只有代码发生改变时才会重新编译并运行测试。
总结
Jest 每次测试都重新编译的问题严重影响了测试效率和开发体验。通过关闭 JSDOM 的缓存机制、利用 Jest 的缓存机制和利用 Webpack 的缓存机制等方法，我们可以有效地解决这个问题，提高测试效率和开发质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64740670968c7c53b017818c