在进行前端开发时，Jest 是一个非常受欢迎的单元测试框架。然而，当我们在 Jest 中进行测试时，经常会遇到 "SyntaxError: Unexpected token import" 的错误信息。而这个问题的原因是因为 Jest 默认不支持 ES6 的模块语法，所以不能直接使用 import/export 语句。
解决方案
方案一：使用 babel-jest
可以使用第三方插件 babel-jest 来解决这个问题。这个插件可以让 Jest 识别 ES6 语法，我们可以在配置文件 jest.config.js 中进行配置。
首先，安装 babel-jest
npm i -D babel-jest @babel/core @babel/preset-env
在 jest.config.js 中，配置如下：
module.exports = {
...
transform: {
"^.+\\.jsx?$": "babel-jest"
}
...
}然后在项目根目录下创建一个 .babelrc 文件，写入以下内容：
{
"presets": ["@babel/preset-env"]
}现在，可以在 Jest 中使用 ES6 的模块语法了。
方案二：使用 CommonJS 语法
另一种解决方法是使用 CommonJS 语法来替代 ES6 的模块语法。这种方法可能会使我们的代码变得冗长和笨重，但是可以避免使用 babel-jest 这个第三方插件。
在代码中，我们可以使用 require 关键字来导入我们需要的模块。例如：
const { someFunction } = require('../src/myModule');在测试代码中使用时，也可以通过类似的方式导入。
这种方式可能会对我们的代码造成一定程度的破坏，但是可以保证 Jest 中能够正常使用。
总结
Jest 是一个很好的单元测试框架。在进行测试时，我们经常会遇到 "SyntaxError: Unexpected token import" 的错误信息。但是，这个问题非常容易解决，我们可以使用 babel-jest 或者使用 CommonJS 语法来解决这个问题。我希望本篇文章能够对你有所启发，帮助你更好地使用 Jest 进行前端开发。
代码示例
-- -------------------- ---- ------- -- --------------- ------ -------- -------------- - ------ ------- -------- - -- -------------------------- ----- - ------------ - - --------------------------- ------------------ ------ ------ ------- --------- -- -- - ----------------------------------- --------- ---
// jest.config.js
module.exports = {
transform: {
"^.+\\.jsx?$": "babel-jest"
}
};// .babelrc
{
"presets": ["@babel/preset-env"]
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482874448841e98941eb169