如何在 Jest 测试中使用 ES6 语法的 import/export？-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个流行的 JavaScript 测试框架，它使得编写和运行测试变得更加容易。然而，由于 Jest 本身是使用 CommonJS 模块系统编写的，所以当尝试在 Jest 测试中使用 ES6 模块时，我们可能会遇到一些问题。在本文中，我们将讨论如何在 Jest 测试中使用 ES6 语法的 import/export。

问题描述

通常情况下，ES6 中的 import/export 语法不会与 CommonJS 模块导出语法相容，因为前者使用了静态导入，后者使用了动态导入。因此，如果我们在 Jest 测试文件中尝试使用 ES6 import/export 语法，就可能会得到以下错误：

SyntaxError: Cannot use import statement outside a module

这是因为 Jest 默认将测试文件视为 CommonJS 模块，而不是 ES6 模块。

解决方案

为了在 Jest 测试中使用 ES6 import/export 语法，我们可以使用 Babel 来编译测试文件。Babel 是一个 JavaScript 编译器，可以将 ES6 代码编译为 ES5 代码，使其可以运行在当前的 JavaScript 运行环境中。那么如何使用 Babel 编译测试文件呢？

首先，我们需要安装 Babel 相关的依赖：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

其中，@babel/core 是 Babel 的核心库，@babel/preset-env 和 @babel/preset-react 是预设，用于设置 Babel 编译器的转换规则。

然后，我们需要在项目根目录下创建一个名为 .babelrc 的文件，用于指定 Babel 的配置。文件内容如下：

{
  "presets": ["@babel/preset-env"]
}

这里，我们只使用了 @babel/preset-env 预设，它可以根据当前的运行时环境自动识别出需要编译的语法特性。

接着，我们需要在 Jest 配置文件中指定 Babel 的转换器。在 package.json 中添加以下代码：

"jest": {
  "transform": {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.js?$": "babel-jest"
  }
}

这里，我们使用了 babel-jest 转换器，它会自动使用项目根目录下的 .babelrc 文件中定义的配置进行编译。

最后，我们就可以在测试文件中使用 ES6 import/export 语法了。以下是一个示例：

// src/test.js
import { sum } from '../src/utils';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

在上面的代码中，我们使用了 import 语句导入 sum 函数，并在测试中使用它。当执行 Jest 测试时，Babel 会自动将 import 语句转换为 CommonJS 的 require 语句，使得测试可以顺利运行。

总结

在 Jest 测试中使用 ES6 语法的 import/export，需要使用 Babel 编译器进行转换。我们需要安装相关的依赖，配置 Babel 转换器，并在测试文件中使用 ES6 语法导入模块。通过这种方法，我们可以方便地在 Jest 测试中使用各种 ES6 语法，提高测试的编写和维护效率。

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