在前端开发过程中，我们经常需要使用 Jest 进行单元测试。但是，在运行测试时，有时候会出现 “SyntaxError: Unexpected token import” 错误，这是因为 Jest 不支持 ES6 的模块导入语法。本文将介绍如何解决这个问题。
错误原因
在 ES6 中，我们可以使用 import 和 export 关键字来导入和导出模块。但是，Jest 运行测试时，会使用 Node.js 运行环境，而 Node.js 目前只支持 CommonJS 的模块导入语法，不支持 ES6 的模块导入语法，因此会出现 “SyntaxError: Unexpected token import” 错误。
解决方法
要解决这个问题，我们需要使用一些工具和技术来将 ES6 的模块导入语法转换成 CommonJS 的模块导入语法。
1. 使用 Babel
Babel 是一个 JavaScript 编译器，可以将 ES6 的代码转换成 ES5 的代码。我们可以使用 Babel 将 ES6 的模块导入语法转换成 CommonJS 的模块导入语法。
首先，我们需要安装相关的依赖：
npm install --save-dev @babel/core @babel/preset-env babel-jest
然后，在项目根目录下创建一个 .babelrc 文件，配置 Babel 的预设和插件：
{
"presets": [
"@babel/preset-env"
]
}最后，在 Jest 的配置文件中，添加以下配置：
{
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}这样就可以将 ES6 的模块导入语法转换成 CommonJS 的模块导入语法了。
2. 使用 Jest 的 transform 配置
除了使用 Babel，我们还可以直接在 Jest 的配置文件中使用 transform 配置来将 ES6 的模块导入语法转换成 CommonJS 的模块导入语法。
在 Jest 的配置文件中添加以下配置：
{
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(module-name)/)"
]
}其中，transform 字段用于指定需要转换的文件类型，transformIgnorePatterns 字段用于指定不需要转换的文件类型。
3. 将测试文件命名为 .es6.js
还有一种简单的方法，就是将测试文件的后缀名改为 .es6.js，这样 Jest 就会将其识别为 ES6 的文件，然后自动使用 Babel 进行转换。
示例代码
下面是一个使用 Babel 进行转换的示例代码：
import sum from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在使用 Babel 进行转换后，代码会变成这样：
-- -------------------- ---- ------- ---- -------- --- ---- - ----------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- - ---------- - - - -- ----- --- -------- -- - ---------- ------------------- ------------ ---
总结
在前端开发中，单元测试是非常重要的一部分。Jest 是一个非常好用的测试框架，但是在运行测试时，可能会出现 “SyntaxError: Unexpected token import” 错误。通过使用 Babel 或 Jest 的 transform 配置，我们可以很方便地解决这个问题。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6638ade9d3423812e46b5f03