Jest 测试中遇到的语法错误：Unexpected token import

在使用 Jest 进行前端测试时，你可能遇到过一个错误：Unexpected token import。这个错误通常出现在使用 ES6 模块语法时，因为 Jest 默认不支持 ES6 模块语法。本文将介绍如何解决这个问题，并提供一些示例代码。

解决方法

要解决这个问题，需要在 Jest 配置文件中添加一些配置。具体步骤如下：

1. 安装 babel-jest 和 @babel/preset-env：

   npm install --save-dev babel-jest @babel/preset-env

2. 创建 .babelrc 文件，并添加以下内容：

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

3. 在 Jest 配置文件中添加以下配置：

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

完成上述步骤后，Jest 就能够正确解析 ES6 模块语法了。

示例代码

下面是一个使用了 ES6 模块语法的示例代码：

// www.javascriptcn.com code example
// utils.js
export function add(a, b) {
  return a + b;
}

// test.js
import { add } from './utils';

test('add function works', () => {
  expect(add(1, 2)).toBe(3);
});

如果你不添加上述配置，Jest 就会抛出以下错误：

SyntaxError: Unexpected token import

但如果你按照上述步骤进行配置，就能够正确运行测试了。

指导意义

本文介绍了如何解决 Jest 测试中遇到的语法错误：Unexpected token import。这个错误通常出现在使用 ES6 模块语法时，因为 Jest 默认不支持 ES6 模块语法。通过本文的介绍，你可以了解到如何配置 Jest，使其能够正确解析 ES6 模块语法。这对于前端开发人员来说是非常有帮助的，因为现在越来越多的前端项目都使用了 ES6 模块语法。

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