前言
在前端开发中，单元测试是必不可少的一环。Jest 是 React 生态圈中最常用的测试工具之一，其强大的功能和友好的 API 受到了很多人的喜爱。然而，在使用 Jest 进行测试时，很容易遇到 "Unexpected token import" 的错误，导致测试无法正常运行。本文将带你解决这个问题并指导你如何正确配置 Jest。
问题描述
当我们使用 Jest 进行测试时，如果我们的源代码中含有 ES6 中的 import/export 语法，那么 Jest 会提示我们 "Unexpected token import" 的错误，例如：
-- -------------------- ---- -------
------------ ---------- ----- ------
- - - ------ ----- ---- --------
- -
-- --------------- ----------------
-- -------- ------------------------------------------
-- --------------- ------------------------------------------
-- ----------------------------- ------------------------------------------
-- ----------- -----------------------------------------
-- --------------------- -----------------------------------------这个错误提示意味着 Jest 无法识别 import 语法，导致编译失败。那么，我们该怎样解决这个问题呢？
解决方法
解决 "Unexpected token import" 的错误，有两种方法：
方法一：使用 Babel 转义
第一种方法是使用 Babel 转义，它可以将 ES6 的 import/export 语法转换成 CommonJS 的 require/module.exports 语法，使得 Jest 能够正确识别代码。
首先，我们需要安装以下依赖：
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-jest
然后，在项目根目录中创建一个 .babelrc 或者 babel.config.js 文件，写入如下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}这样，我们就配置好了 Babel 的基本设置。最后，我们需要在 Jest 的配置文件中告诉 Jest 使用 Babel 进行转义。打开 jest.config.js 文件，添加如下代码：
module.exports = {
...
transform: {
'^.+\\.js$': 'babel-jest',
},
};这样，我们就完成了 Jest 的 Babel 配置。现在，重新运行测试，问题就应该已经解决了。
方法二：使用 Jest 的配置
第二种方法是使用 Jest 的配置。在 Jest 的配置文件中，我们可以指定全局变量，包括 import 语法的函数。现在，我们就来看一个具体的例子。
示例代码
我们有一个名为 greet.js 的模块，它输出了一个名为 greet 的函数。我们使用 import 语法导入 greet 函数，并在 test.js 文件中使用它。
greet.js：
export function greet(name) {
return `Hello, ${name}!`;
}test.js：
import { greet } from './greet';
describe('greet', () => {
it('should return a greeting', () => {
expect(greet('World')).toBe('Hello, World!');
});
});当我们运行 Jest tester 时，会得到如下的错误提示：
-- -------------------- ---- -------
------------ ---------- ----- ------
- - - ------ - ----- - ---- ----------
- -
-- ------------------------------------------ ----------------------------------------------------------------
-- --------------------------- ----------------------------------------------------------------
-- ------------------ -----------------
-- -------------------- -----------------------------------------------
-- ------------------ -----------------接下来，我们可以开始配置 Jest 的全局变量了。在 jest.config.js 文件中，添加如下代码：
-- -------------------- ---- -------
-------------- - -
---
-------- -
---------- -
------------ -
-------- --------------- - -------- - ----- --------- - ----
--
--
--------- -----
--
--现在，我们再次运行测试，问题应该就已经解决了。
总结
在前端开发中，单元测试是非常重要的一环。在使用 Jest 进行测试时，我们很容易遇到 "Unexpected token import" 的错误，这是因为 Jest 无法识别 ES6 中的 import/export 语法。为了解决这个问题，我们可以使用 Babel 转义或者使用 Jest 的全局变量进行配置。以上两种方法各有优劣，需要根据实际情况选择。希望本文能够帮助你解决这个问题，并指导你进行 Jest 的正确配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7505ef6b2d6eab32e3d57