引言
在前端开发过程中，测试是非常重要的一环，能够通过测试验证代码的正确性、稳定性和可靠性。Jest 是一个常用的 JavaScript 测试框架，它支持 mock、snapshot、coverage 等常用测试功能，在实际开发中被广泛应用。然而，有时会遇到 Jest 报错：SyntaxError: Unexpected token import，而无法进行正常测试。那么这个问题是什么原因造成的，又该如何解决呢？
原因分析
这个错误提示表明，import 关键字被解析器识别为“意外的标记”，即遇到了不应该存在的字符或者语句。这是因为 import 是 ES6 中的模块引用语法，而 Jest 默认只支持 CommonJS 规范的模块引用。所以，在测试文件中如果使用 import 而未进行转译，则会引发 Jest 报错。
解决方法
要解决 Jest 报错：SyntaxError: Unexpected token import，需要进行如下操作：
- 安装 @babel/core、@babel/preset-env 和 @babel/plugin-transform-runtime 等相关依赖：
npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-runtime
- 在项目根目录中创建 .babelrc 配置文件，并进行如下配置：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}这里使用了 @babel/preset-env 和 @babel/plugin-transform-runtime，前者是 Babel 提供的一种 preset，用于根据当前环境自动加载需要的插件，而后者则是转化 Async/Await 等语法的插件，可以避免污染全局对象。
- 修改 Jest 的配置文件，让 Jest 使用 Babel 进行转译。在 package.json 中添加如下命令：
{
"scripts": {
"test": "jest --transform babel-jest"
}
}这里的 --transform babel-jest 表示将测试文件进行转译，从而支持 import、async 等语法。
- 如果项目中还使用了 webpack，需要在 Jest 配置文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
----------------- -
----------- ------------------ -- - - ------- --- --
--
--------------------- -
----- ------
--
---------- -
------------ ----------------------------------- -- -- ---------- ----
--
----------------------- -
----------------
--
------------------- ---------------------------------
-示例代码
下面是一个使用 Jest 进行测试的示例代码：
// index.js
import { add } from './math.js';
test('add function should work correctly', () => {
expect(add(1, 2)).toBe(3);
})// math.js
export function add(a, b) {
return a + b;
}// jest.config.js
module.exports = {
transform: {"\\.js$": ["babel-jest", { rootMode: "upward" }]}
};运行命令 npm run test 后，即可看到测试通过，并得到正确的测试结果。
结论
Jest 报错：SyntaxError: Unexpected token import 表示测试文件中使用了 ES6 的 import 语法，而 Jest 默认只支持 CommonJS 规范的模块引用，因此需要使用 Babel 进行转译。配置过程较为繁琐，但只要按照步骤操作，就可以解决此类问题。在实际开发中，如果需要进行单元测试，建议使用 Jest 进行测试，以提高代码的可靠性与稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f520c4c5c563ced56da0cb