在前端开发中，Jest 成为了一个越来越流行的测试框架。在使用 Jest 进行测试时，我们需要对 Jest 进行一些配置。其中，使用 setupFiles 进行配置是 Jest 的一种常用方式。本文将详细介绍如何在 Jest 中使用 setupFiles 进行配置，以及该过程的学习和指导意义。
学习前提
在阅读本文之前，你需要了解以下内容：
- Jest 的基本使用方法
- Jest 的配置文件
如果不了解 Jest，可以先阅读 Jest 文档中心中的相关文档。
什么是 setupFiles？
在 Jest 中，setupFiles 指的是一组在测试运行之前运行的 JS 脚本。这几个脚本可以用来修改 Jest 的配置、设置全局变量、引入第三方库等等。当你需要在测试运行之前进行一些全局性的设置时，可以使用 setupFiles 进行配置。
如何在 Jest 中使用 setupFiles？
- 在 Jest 的配置文件中添加 setupFiles 配置项。
在 Jest 的配置文件中，添加 setupFiles 配置项，并将其设为一个数组，数组中的每一项都是一个 JS 脚本路径。例如：
module.exports = {
setupFiles: ['./my-setup-file.js'],
};- 编写 setupFiles 脚本
根据自己的需求，编写一个或多个 setupFiles 脚本。这些脚本会在测试运行之前被执行。在这些脚本中，你可以进行一些全局性的设置。
例如，你可以创建一个 my-setup-file.js 文件，将 Jest 的默认超时时间设为 10s：
jest.setTimeout(10000);
你还可以通过 setupFiles 脚本来引入第三方库，例如：
global.$ = require('jquery');引入之后，就可以在测试中使用全局变量 $，方便进行 DOM 操作。
setupFiles 的深度和学习意义
使用 setupFiles 可以让我们在测试运行之前进行全局性的设置，这对于编写可维护的测试非常的有用。例如，在测试之前引入 jQuery 或 React，可以方便我们在测试中进行 DOM 操作和组件的测试。
除此之外，还有很多其他的用途。例如：
- 在测试运行之前重写 Jest 的默认配置。
- 引入全局 mock。
- 在测试运行之前设置网络请求的超时时间等。
这些都可以被用来进行更细致的测试，增加测试的深度。
示例代码
下面是一个示例代码，该代码使用了 setupFiles：
// javascriptcn.com 代码示例
// jest.config.js
module.exports = {
setupFiles: ['./my-setup-file.js'],
};
// my-setup-file.js
jest.setTimeout(10000);
global.$ = require('jquery');
global.mockFetch = (body, status = 200) => {
global.fetch = jest.fn().mockResolvedValue({
status,
json: () => Promise.resolve(body),
});
};在上面的代码中，我们在 Jest 的配置文件中添加了 setupFiles 配置项，将其设为一个数组，并引入了一个名为 my-setup-file.js 的脚本。
在 my-setup-file.js 中，我们将超时时间设为 10s、引入了 jQuery，并定义了一个全局变量 mockFetch，用于全局 mock fetch 请求。在测试中，我们可以直接引用这些全局变量，方便进行测试。
总结
通过本文的介绍，你了解了如何在 Jest 中使用 setupFiles 进行配置，并了解了该过程的学习和指导意义。在编写测试时，使用 setupFiles 可以让我们更好地进行全局性的设置，提高测试的深度和可维护性。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653671e27d4982a6ebe831c9