在前端开发中，Jest 是一个广泛使用的测试框架。然而，Jest 在处理 ES-Modules 上存在一些问题，这使得在使用 Jest 进行测试时，我们不得不使用一些 hack 的方法来解决这些问题。在本文中，我们将介绍如何在 Jest 中使用 ES-Modules，并提供一些示例代码来帮助您更好地理解。
问题描述
在 Jest 中，我们可以使用 CommonJS 模块来导入和导出模块。但是，如果您的代码使用 ES-Modules，您会遇到一些问题。例如，当您尝试导入 ES-Modules 时，Jest 会抛出一个错误：
SyntaxError: Cannot use import statement outside a module
这是因为 Jest 默认使用 CommonJS 模块，而不是 ES-Modules。因此，当您尝试使用 import 语句导入 ES-Modules 时，Jest 无法识别它。
解决方案
为了解决 Jest 中使用 ES-Modules 的问题，我们需要使用一些 hack 的方法。下面是两种常用的解决方案：
1. 使用 Babel
首先，我们可以使用 Babel 将 ES-Modules 转换为 CommonJS 模块。这样，当 Jest 运行测试时，它将使用转换后的 CommonJS 模块。
要使用 Babel，我们需要安装一些依赖项：
npm install --save-dev @babel/core @babel/preset-env babel-jest
然后，在项目的根目录下创建一个 .babelrc 文件，并添加以下内容：
{
"presets": [
"@babel/preset-env"
]
}接下来，在 Jest 的配置文件中，我们需要将 transform 选项设置为 babel-jest，并将 testMatch 选项设置为要测试的文件的模式。
// javascriptcn.com code example
module.exports = {
transform: {
'^.+\\.jsx?$': 'babel-jest'
},
testMatch: [
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
]
};现在，当您运行 Jest 时，它将使用 Babel 将 ES-Modules 转换为 CommonJS 模块，并执行测试。
2. 使用 Jest 的 esModules 选项
另一种解决方案是使用 Jest 的 esModules 选项。这个选项允许我们在测试文件中使用 ES-Modules，并告诉 Jest 如何处理它们。
要使用 esModules 选项，我们需要在 Jest 的配置文件中添加以下内容：
// javascriptcn.com code example
module.exports = {
testMatch: [
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
],
transform: {},
globals: {
'ts-jest': {
esModuleInterop: true
}
},
esModules: true
};在这个配置中，我们将 esModules 选项设置为 true，这告诉 Jest 在测试文件中使用 ES-Modules。同时，我们将 transform 选项设置为空对象，这意味着 Jest 不会对测试文件进行转换。
示例代码
下面是一个使用 ES-Modules 的示例代码：
// javascriptcn.com code example
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;
// math.test.js
import { add, subtract, multiply, divide } from './math.js';
test('add', () => {
expect(add(1, 2)).toBe(3);
});
test('subtract', () => {
expect(subtract(2, 1)).toBe(1);
});
test('multiply', () => {
expect(multiply(2, 3)).toBe(6);
});
test('divide', () => {
expect(divide(6, 3)).toBe(2);
});在这个示例中，我们定义了一个 math.js 模块，它导出了一些函数。然后，我们编写了一个 math.test.js 测试文件，它使用 ES-Modules 导入了 math.js 模块，并测试了导出的函数。
结论
在本文中，我们介绍了如何在 Jest 中使用 ES-Modules，并提供了两种解决方案：使用 Babel 和使用 Jest 的 esModules 选项。我们还提供了示例代码，以帮助您更好地理解这些解决方案。无论您选择哪种方法，都可以让您在 Jest 中使用 ES-Modules，从而更好地测试您的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673b412539d6d08e88b29f94