Jest 运行测试时报错 "SyntaxError: Unexpected token import" 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Jest 是一款非常流行的 JavaScript 测试框架，可以帮助开发者简化测试流程，提高开发效率。但在使用 Jest 进行测试时，有时会遇到 SyntaxError: Unexpected token import 的报错，这可能会让开发者感到十分困惑。

本文将会详细介绍这个报错的原因，以及解决方法和示例代码，希望能够对读者有所帮助。

报错原因

这个报错常常出现在使用了 ES6 模块化语法的项目中：当我们在测试文件中引入了一个用 import 关键字引入的模块时，Jest 就会报错。这是因为 Jest 默认只识别 CommonJS 的模块化语法，而不支持 ES6 模块化语法。也就是说，Jest 不认识如下代码中的 import：

import module from './module.js';

test('something', () => {
  expect(module.function()).toBe(1);
});

因此，我们需要对 Jest 进行一些配置，来使其支持 ES6 模块化语法。

解决方法

方法一：使用 Babel 转换器

我们可以使用 Babel 转换器，将 ES6 的模块化语法转换成 CommonJS 的模块化语法。Babel 可以将 import 转换成 require，使得 Jest 可以正确地处理测试文件中引入的模块。

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

npm install --save-dev @babel/core @babel/preset-env @babel/cli @babel/register

然后，在项目的根目录下新建一个名为 babel.config.js 的配置文件，写入以下内容：

// javascriptcn.com 代码示例
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

这个配置文件中，我们使用 @babel/preset-env 来指定需要转换的语言特性，以及所支持的目标环境。在本例中，我们指定转换后的代码可以在当前的 Node.js 环境中运行。

接下来，在测试文件中，我们需要在文件头部加入下面这句代码，将测试文件包含在 Babel 转换的范围之内：

require('@babel/register')();

最后，我们可以在终端中运行测试命令，Babel 转换器就会开始工作了：

npm run test

方法二：使用 Jest 提供的支持 ES6 的配置选项

除了使用 Babel 转换器之外，Jest 还提供了一个 transform 配置选项，可以直接将测试文件中的 ES6 模块化语法转换成 CommonJS 模块化语法。具体实现方法如下：

首先，在项目的根目录下创建一个 jest.config.js 文件，并写入以下内容：

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
};

这个配置文件中，我们指定 Jest 对所有以 .js 或 .jsx 结尾的文件都使用 babel-jest 进行转换。

然后，在测试文件中，我们同样需要引入 @babel/preset-env：

import '@babel/polyfill';

这行代码会让测试文件中的所有 ES6 代码都可以被正确解析，以及在运行时被转换成 CommonJS 语法。

最后，我们可以在终端中运行测试命令：

npm run test

这样，Jest 就能正确地识别测试文件中的 ES6 模块化语法了。

示例代码

下面是一个测试文件的完整示例代码，展示了如何使用 Jest 支持 ES6 的配置选项：

import '@babel/polyfill';
import module from './module.js';

test('something', () => {
  expect(module.function()).toBe(1);
});

对于这个测试文件，我们可以在项目的根目录下创建一个 .babelrc 文件，用来配置 Babel 转换。我们将 @babel/preset-env 装载进 .babelrc，并且将其指定的 targets 设为当前的 Node.js 版本：

// javascriptcn.com 代码示例
{
  "presets": [
      [
          "@babel/preset-env",
          {
              "targets": {
                  "node": "current"
              }
          }
      ]
  ]
}

然后，我们可以创建一个 jest.config.js 文件，将 @babel/preset-env 装载进 Jest 的 transform 配置项：

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
};

最后，在终端中使用 npm run test 命令来运行测试，即可得到正确的测试结果。

总结

Jest 是一款非常实用的 JavaScript 测试框架，支持各种各样的测试场景。但在使用 Jest 进行测试时，我们有时会遇到 SyntaxError: Unexpected token import 的报错。这是因为 Jest 默认只支持 CommonJS 的模块化语法，而不支持 ES6 的模块化语法。

为了解决这个问题，我们可以采用两种方法中的任意一种：使用 Babel 转换器将 ES6 代码转换为 CommonJS 代码，或者让 Jest 支持 ES6 的模块化语法。

希望本文能够帮助读者获得更好的 Jest 使用体验。如果读者在实际开发中遇到了类似问题，可以尝试本文提供的解决方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654675597d4982a6eb078be9