前言
在前端开发中，单元测试是一个非常重要的环节，它可以帮助我们发现代码中的问题，提高代码的质量和可维护性。而 Jest 是一个非常流行的单元测试框架，它提供了一系列的测试工具和 API，可以帮助我们轻松地编写和执行单元测试。但是在使用 Jest 进行单元测试时，有时会遇到 “SyntaxError: Unexpected token 'export'” 的问题，本文将介绍这个问题的原因和解决方法。
问题描述
当我们使用 Jest 进行单元测试时，如果我们的代码中使用了 ES6 的模块语法（即使用了 import 和 export），就有可能会遇到 “SyntaxError: Unexpected token 'export'” 的问题。例如，下面是一个简单的示例代码：
-- ------- ------ -------- ------ -- - ------ - - -- - -- ------------ ------ - --- - ---- --------- ----------- -- -- - ------------- ------------ ---
当我们执行 jest 命令时，就会得到以下错误信息：
- ---- ----- ------ -- ---
-------------------------------
----------------------------------------------------------------------------------------------- - --- - ---- ---------
-------
------------ ---------- ----- --------
-- ---------------------------- --------------------------------------------------
-- ------------------ ------------------这个错误信息告诉我们，在执行 math.test.js 文件时，发现了一个语法错误，即在第一行使用了 import 语法，而这个语法在当前的环境下不支持，因此导致了错误。这个问题的原因是因为 Jest 默认使用了 CommonJS 的模块语法，而不支持 ES6 的模块语法。
解决方法
要解决这个问题，我们需要让 Jest 支持 ES6 的模块语法。有两种方法可以实现这个目的：
方法一：使用 Babel 转换
第一种方法是使用 Babel 转换。Babel 是一个非常流行的 JavaScript 编译器，它可以将 ES6 代码转换成 ES5 代码，从而在当前的环境中运行。我们可以使用 Babel 将 ES6 的模块语法转换成 CommonJS 的模块语法，从而让 Jest 支持 ES6 的模块语法。
具体来说，我们需要安装以下几个依赖项：
- @babel/core：Babel 的核心模块。
- @babel/preset-env：Babel 的预设模块，用于将 ES6 代码转换成 ES5 代码。
- babel-jest：Jest 的 Babel 转换器。
我们可以通过以下命令安装这些依赖项：
--- ------- ---------- ----------- ----------------- ----------
然后，在项目根目录下创建一个 .babelrc 文件，用于配置 Babel 的转换规则：
- ---------- --------------------- -
这个配置文件告诉 Babel 使用 @babel/preset-env 这个预设模块来转换代码。这个预设模块会根据当前的环境自动选择需要转换的语法特性。
接下来，我们需要在 Jest 的配置文件中配置 Babel 转换器。在项目根目录下创建一个 jest.config.js 文件，用于配置 Jest 的选项：
-------------- - -
---------- -
------------ -------------
--
--这个配置文件告诉 Jest 使用 babel-jest 这个转换器来转换所有的 .js 文件。当 Jest 遇到一个 .js 文件时，它会先使用这个转换器将代码转换成 CommonJS 的模块语法，然后再执行测试。
现在，我们可以重新执行 jest 命令，就可以看到测试通过了。
方法二：使用 Jest 的 esModules 选项
第二种方法是使用 Jest 的 esModules 选项。这个选项可以让 Jest 支持 ES6 的模块语法，从而不需要使用 Babel 转换器。
具体来说，我们只需要在 Jest 的配置文件中添加一个 esModules 选项，将其设置为 true 即可：
-------------- - - ---------------- ------- ---------- ----- --
这个选项告诉 Jest 支持 ES6 的模块语法。当 Jest 遇到一个 .js 文件时，它会先判断这个文件是否使用了 ES6 的模块语法，如果使用了，就会将其作为 ES6 模块来处理。这样，我们就可以在测试代码中使用 import 和 export 语法了。
总结
在使用 Jest 进行单元测试时，遇到 “SyntaxError: Unexpected token 'export'” 的问题，是因为 Jest 默认不支持 ES6 的模块语法。我们可以使用 Babel 转换器或者 Jest 的 esModules 选项来解决这个问题。这些方法都可以让 Jest 支持 ES6 的模块语法，从而让我们可以在测试代码中使用 import 和 export 语法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e02d341886fbafa4d66cac