前言
当你使用 Jest 进行前端单元测试时，你可能会遇到类似于下面这个报错：
SyntaxError: Unexpected token import
这个报错通常是因为 Jest 默认只能处理 CommonJS 模块，而我们在使用 import/export 的 ES6 模块时就会出现这个错误。在本篇文章中，我们将会学习如何解决这个问题，以便你在使用 Jest 进行单元测试时能够顺利通过这个问题。
解决方案
使用 Babel 转译 ES6 模块
对于 Jest 默认只能处理 CommonJS 模块的问题，我们可以通过使用 Babel 来进行 ES6 模块的转译。首先，我们需要安装一些 Babel 相关的包：
npm install @babel/core @babel/preset-env babel-jest --save-dev
接着在项目根目录下创建一个 .babelrc 文件，并添加如下的配置：
{
"presets": [
"@babel/preset-env"
]
}这个配置文件告诉 Babel，我们需要使用 @babel/preset-env 来转译代码，这个 preset 会根据当前使用的 JavaScript 版本来自动选择需要的插件和转译规则。
最后，在 jest.config.js 文件中添加如下代码：
module.exports = {
transform: {
"^.+\\.js$": "babel-jest"
}
}这个配置告诉 Jest，在处理 .js 文件时使用 Babel 进行转译。
使用 Jest 支持的 ES6 模块配置
除了使用 Babel 进行转译，我们也可以直接使用 Jest 支持的 ES6 模块配置来解决这个问题。我们只需要在 jest.config.js 文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
---------- ---
--------------------- ------ ------ ------ ----- ------ ------- --------
---------- -
---------------------------
-----------------------------
--
----------------- -
----------- ------------------
--
-------- -
----------------------- ------
--
-------- --------------------
-- ---------
------------------------ -----------------------------------
------- ----------------
--这个配置告诉 Jest，我们使用 transformIgnorePatterns 来忽略对特定文件的转译，这里我们忽略了 node_module 文件夹下除了 lodash-es 外的所有文件的转译。
示例代码
下面是一个示例代码，你可以在这个基础上进行测试和学习：
-- -------------------- ---- -------
-- -----------
------ ----- -------- - ------ -- -
------ ------ ----------
--
-- ----------------
------ - -------- - ---- -------------
-------------------- -- -- -
----------- --- ------- ---------- -- -- -
----- -------- - ------------------
------------------------------- ---------
---
---总结
以上就是解决 Jest 中遇到的 "SyntaxError: Unexpected token import" 错误的两种方法，我们可以根据自己的项目实际情况来选择相应的方案。希望这篇文章能对你解决这个问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c36d5d83d39b488177256b