Jest ES6 语法中使用 import 出现 “SyntaxError: Unexpected identifier” 提示解决方案
前言
随着 JavaScript 不断地普及，ES6 已经成为了现代前端开发的标准，而 Jest 作为前端测试框架，也同样支持 ES6 的语法。但是在使用 Jest 进行测试时，如果使用 import 导入模块，有时候会出现 “SyntaxError: Unexpected identifier” 的提示，这给前端开发者带来了不少的困扰。
本文将介绍这个问题的解决方案，并结合示例代码详细讲解。
问题分析
在 Jest 进行测试时，如果使用 import 导入模块，通常会出现以下错误提示：
Test suite failed to run SyntaxError: Unexpected identifier at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) at Object.<anonymous> (src/test/example.spec.js:1:16)
这个错误提示表明，Jest 在解析文件时，无法识别 import 语法中的标识符，因此导致了错误的发生。
问题解决方案
要解决上述的问题，我们需要安装 babel-jest 和 @babel/core 两个包，它们都是与 Babel 相关的插件。可以通过以下命令进行安装：
npm install --save-dev babel-jest @babel/core
安装完成后，需要在根目录下创建一个名为 .babelrc 的文件，该文件的内容如下：
{
"presets": ["@babel/preset-env"]
}接下来，需要安装 @babel/preset-env 这个包，它是一个 Babel 插件，可以将最新的 ECMAScript 标准编译为浏览器可以运行的代码，可以通过以下命令进行安装：
npm install --save-dev @babel/preset-env
最后，需要在 Jest 的配置文件 jest.config.js 中进行配置，将 testEnvironment 设置为 jsdom，并且添加以下内容：
module.exports = {
// ...
transform: {
'^.+\\.js$': 'babel-jest'
}
};这里的配置，是告诉 Jest 在运行测试用例之前，先使用 babel-jest 将 ES6 代码转换为 ES5 代码，以便 Jest 正常解析 import 语法。
示例代码
-- -------------------- ---- -------
-- ------------------------
------ - ---------- - ---- --------------------
---------------------- -- -- -
---------- ------ - ---- --- - --- --- -- -- -
----- ---------- - --- -------------
------------------------ ------------
---
---
-- -----------------
------ ----- ---------- -
------ -- -
------ - - --
-
-通过安装 Babel 相关的插件，配置 Jest 的配置文件，以及添加 .babelrc 文件，便可以顺利地运行这个示例代码。
结论
使用 Jest 进行前端测试时，如果需要使用 ES6 的语法，需要进行相关的配置。本文详细地介绍了在 Jest 中使用 import 导入模块时出现 “SyntaxError: Unexpected identifier” 的解决方案，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7830ec5c563ced5a0145e