在前端开发中，使用 Jest 进行单元测试已经成为了一种越来越普遍的选择。但是对于大型项目，可能需要使用多个不同的配置文件来测试不同的代码模块和场景。本文将介绍如何使用 Jest 的多配置文件功能来测试不同的代码模块和场景，并提供示例代码帮助读者更好地理解和实践。
Jest 多配置文件的基础概念
Jest 通过读取不同的配置文件来运行不同的测试。在默认情况下，Jest 使用 jest.config.js 文件作为默认的配置文件。但是，当需要测试多个不同的代码模块或场景时，我们可以创建不同的配置文件，例如 jest.config.unit.js 和 jest.config.integration.js，然后在运行 Jest 时指定使用哪个文件作为配置文件。
可以使用 --config 选项来指定 Jest 使用的配置文件。例如，以下命令将 Jest 运行在 jest.config.unit.js 配置文件中：
jest --config=jest.config.unit.js
需要注意的是，当使用多个配置文件时，如果某些配置是相同的，可以使用 extends 选项来避免重复编写相同的配置。例如，在两个配置文件中都需要使用到的 Jest 插件，可以将它们放在一个独立的配置文件中，然后在其它配置文件中使用 extends 选项来继承该文件的配置。
多配置文件的实践
以下是一个使用多配置文件的实例。假设我们有一个 React 应用程序，需要测试它的组件和 API 接口。我们将会创建两个配置文件，jest.config.ui.js 和 jest.config.api.js，来测试组件和 API 接口。
配置 jest.config.common.js
为了保持配置文件的 DRY 原则，我们首先要创建一个共享的配置文件，jest.config.common.js。该配置文件包含了所有两个配置文件所需共享的配置项，例如使用了 enzyme 和 babel-jest 插件的配置。
-- -------------------- ---- -------
-------------- - -
-- - --- --- ---------- --
---------- -
-------------- -------------
--
-- -- ------ -- ----- -----
-------------------- ------------------------------
------------------- ---------------------------------
--配置 jest.config.ui.js
接下来我们创建 jest.config.ui.js 配置文件，它包含了测试 UI 组件所需的设置，例如使用 enzyme-adapter-react-16 适配器和 jQuery 库的支持。
-- -------------------- ---- -------
----- - -------- - - -----------------------
----- - ---- - - ----------------
-------------- - -
------------
-- ------
------- -----------------
----------------- -
---------------------- --------------- ---------------------
-------------------------- --------------- ---------------------
--
------------------- ---------------------------------
-- -- ----------------------- ---
----------- -----------------------------------
--在这里，我们添加了一个 setupFiles 配置项，它包含指向 enzyme-setup.js 文件的路径。这个文件将负责加载 Enzyme 和 React DOM 上的适配器。
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });我们还添加了 moduleNameMapper 配置，用于在测试中使用类似 jQuery 的第三方库，并使用 setupFilesAfterEnv 配置项在测试启动前进行额外的设置。
配置 jest.config.api.js
最后我们创建测试 API 接口所需的配置文件 jest.config.api.js，该文件添加了对 supertest 库的支持。
-- -------------------- ---- -------
----- - -------- - - -----------------------
----- - ---- - - ----------------
-------------- - -
------------
-- ------
---------- ------------------------
------------------- ---------------------------------
----------------- -
---------------------- --------------- ---------------------
-------------------------- --------------- ---------------------
--
-- -- --------- -------
----------- --------------------------------------
--这里我们添加了一个 testMatch 配置项，用于指定 API 测试所需的文件匹配模式。我们还添加了一个 setupFiles 配置项，该文件将用于加载 supertest 库和对应的 express 应用程序。
const app = require('../app');
const supertest = require('supertest');
const request = supertest(app);
global.app = app;
global.request = request;注意，在这里，global.app 和 global.request 变量将分别引用我们的 express 应用程序和 supertest 库，这使我们可以在所有 API 测试之前访问它们。
运行测试
现在我们已经准备好了两个不同的配置文件，来分别测试 UI 组件和 API 接口。我们需要运行两个命令，分别使用不同的配置文件来运行测试：
jest --config=jest.config.ui.js jest --config=jest.config.api.js
这样，我们可以看到 Jest 将把组件和 API 接口分别测试，并展示相应的测试结果。
总结
以上是如何在 Jest 中使用多个配置文件进行测试的详细指南。使用 Jest 的多配置文件功能将大大方便我们测试不同的代码模块和场景，并提高测试的精度和效率。我们需要记住的重点是共享配置，使用 extends 选项继承公共配置，并在不同的配置文件中添加特有的配置来满足不同的测试需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64841fc348841e989434a89e