解决 Jest testEnvironment 配置问题：第三方库无法引用的问题

在使用 Jest 进行前端测试时，我们经常需要引用一些第三方库来测试我们的代码。然而，有时候我们会遭遇一个比较棘手的问题，就是在 Jest 配置中配置了 testEnvironment，但是第三方库却无法正常引用的情况。本文将详细介绍解决这个问题的方法。

1. 问题描述

在 Jest 的配置文件 jest.config.js 中，我们可以指定 testEnvironment，以决定 Jest 运行时使用的 JavaScript 环境。例如：

module.exports = {
  testEnvironment: 'jsdom',
};

然而，在这种配置下，我们会遇到无法引用第三方库的问题。例如，在我们的测试文件中引用了 jQuery：

import $ from 'jquery';

describe('Test jQuery', () => {
  test('jQuery should work', () => {
    expect($('body').length).toBe(1);
  });
});

当我们运行测试时，会得到类似以下的错误信息：

ReferenceError: $ is not defined

这个错误提示我们 $ 对象未定义，因此我们无法使用 jQuery 库。

2. 解决方法

2.1 方法一：使用 Jest 的 globalSetup

Jest 的 globalSetup 选项可以让我们在运行测试前先运行一些全局的 JavaScript 代码。我们可以利用这个选项，在测试之前手动将需要的第三方库挂载到全局变量上，使得测试时能够正常引用第三方库。

例如，我们可以在 jest.config.js 中加入如下配置：

module.exports = {
  globalSetup: './tests/setup.js',
};

然后我们创建 tests/setup.js 文件，并在其中手动将 jQuery 对象挂载到全局变量上：

global.$ = require('jquery');

这样，在测试时就可以正常引用 jQuery 了：

describe('Test jQuery', () => {
  test('jQuery should work', () => {
    expect($('body').length).toBe(1);
  });
});

2.2 方法二：使用 Jest 的 setupFilesAfterEnv

Jest 的 setupFilesAfterEnv 选项可以让我们在每个测试文件运行前先运行一些指定的 JavaScript 代码。我们可以利用这个选项，在测试之前手动将需要的第三方库挂载到全局变量上，使得测试时能够正常引用第三方库。

例如，我们可以创建 tests/setup.js 文件，并在其中手动将 jQuery 对象挂载到全局变量上：

global.$ = require('jquery');

然后在 jest.config.js 中加入 setupFilesAfterEnv 配置：

module.exports = {
  setupFilesAfterEnv: ['./tests/setup.js'],
};

这样，在测试时就可以正常引用 jQuery 了：

describe('Test jQuery', () => {
  test('jQuery should work', () => {
    expect($('body').length).toBe(1);
  });
});

3. 结论

在 Jest 配置中配置了 testEnvironment 后，我们有时候会无法正常引用第三方库。本文介绍了两种解决方法：利用 Jest 的 globalSetup 和 setupFilesAfterEnv 选项手动将第三方库挂载到全局变量上，使得测试时能够正常引用。当我们遭遇这个问题时，可以根据实际情况选择其中一种解决方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710bd47ad1e889fe2fbc3b4