在 React 前端开发中，测试是必不可少的一环。我们需要经常运行本地测试，以确保我们的代码在不同的环境中都能正常工作。react-tests-globals-setup 这个 npm 包，提供了一种方便快捷的方法来设置全局测试环境，使得我们可以在整个项目中重复使用。
安装
安装这个 npm 包非常简单，只需要在终端中运行以下命令即可：
npm install react-tests-globals-setup --save-dev
使用步骤
第一步
安装完 npm 包后，在项目的入口文件中引入它：
import "react-tests-globals-setup";
第二步
现在我们需要配置全局变量，这可以通过在项目的根目录中创建一个名为 jest.setup.js 的文件来完成。在这个文件中，你可以添加你所需要的全局变量。以下是一个示例：
global.fetch = require("jest-fetch-mock");这个 example 中，我们添加了全局变量 fetch，在执行全局测试时可以重复使用。
第三步
现在我们需要配置 Jest，以便在测试开始之前运行 jest.setup.js。在我们的 jest.config.js 文件中，添加以下代码：
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"]
这可以确保在 Jest 运行测试之前，jest.setup.js 文件将被加载和执行。
最后，你需要确保在运行测试时加载了 react-tests-globals-setup。在 package.json 文件中，添加以下代码：
"scripts": {
"test": "react-scripts test --env=jsdom --setupFilesAfterEnv ./node_modules/react-tests-globals-setup"
}现在你就可以开始测试了！
示例代码
这里是一个使用 react-tests-globals-setup 来测试 React 组件的代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- - --------- - - ------------------- ----
----------------------- -----------------------------
---
---以上代码中，我们使用 Jest 和 React Testing Library 进行测试。我们通过 render 方法来渲染组件，并使用 getByText 方法来获取组件中的某个元素。使用 react-tests-globals-setup，我们可以确保在测试过程中使用全局变量（如 fetch）。
总结
在使用 react-tests-globals-setup 时，请确保在项目的入口文件中引入它，并在 jest.setup.js 文件中添加你所需要的全局变量。并且，你需要在 Jest 配置文件中指定 jest.setup.js 文件。这个 npm 包可以大大简化你的测试流程，使你在整个项目中都能够轻松地重用测试代码。希望这篇文章能帮助你更好地使用 react-tests-globals-setup 作为前端开发的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/197001