在使用 Jest 进行前端测试时，我们经常需要引用一些第三方库来测试我们的代码。然而，有时候我们会遭遇一个比较棘手的问题，就是在 Jest 配置中配置了 testEnvironment，但是第三方库却无法正常引用的情况。本文将详细介绍解决这个问题的方法。
1. 问题描述
在 Jest 的配置文件 jest.config.js 中，我们可以指定 testEnvironment，以决定 Jest 运行时使用的 JavaScript 环境。例如：
-------------- - - ---------------- -------- --
然而，在这种配置下，我们会遇到无法引用第三方库的问题。例如，在我们的测试文件中引用了 jQuery：
------ - ---- ---------
-------------- -------- -- -- -
------------ ------ ------ -- -- -
---------------------------------
---
---当我们运行测试时，会得到类似以下的错误信息：
--------------- - -- --- -------
这个错误提示我们 $ 对象未定义，因此我们无法使用 jQuery 库。
2. 解决方法
2.1 方法一：使用 Jest 的 globalSetup
Jest 的 globalSetup 选项可以让我们在运行测试前先运行一些全局的 JavaScript 代码。我们可以利用这个选项，在测试之前手动将需要的第三方库挂载到全局变量上，使得测试时能够正常引用第三方库。
例如，我们可以在 jest.config.js 中加入如下配置：
-------------- - - ------------ ------------------- --
然后我们创建 tests/setup.js 文件，并在其中手动将 jQuery 对象挂载到全局变量上：
-------- - ------------------
这样，在测试时就可以正常引用 jQuery 了：
-------------- -------- -- -- -
------------ ------ ------ -- -- -
---------------------------------
---
---2.2 方法二：使用 Jest 的 setupFilesAfterEnv
Jest 的 setupFilesAfterEnv 选项可以让我们在每个测试文件运行前先运行一些指定的 JavaScript 代码。我们可以利用这个选项，在测试之前手动将需要的第三方库挂载到全局变量上，使得测试时能够正常引用第三方库。
例如，我们可以创建 tests/setup.js 文件，并在其中手动将 jQuery 对象挂载到全局变量上：
-------- - ------------------
然后在 jest.config.js 中加入 setupFilesAfterEnv 配置：
-------------- - - ------------------- --------------------- --
这样，在测试时就可以正常引用 jQuery 了：
-------------- -------- -- -- -
------------ ------ ------ -- -- -
---------------------------------
---
---3. 结论
在 Jest 配置中配置了 testEnvironment 后，我们有时候会无法正常引用第三方库。本文介绍了两种解决方法：利用 Jest 的 globalSetup 和 setupFilesAfterEnv 选项手动将第三方库挂载到全局变量上，使得测试时能够正常引用。当我们遭遇这个问题时，可以根据实际情况选择其中一种解决方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710bd47ad1e889fe2fbc3b4