在进行前端开发时，我们经常使用 Jest 进行单元测试。然而，在使用 Jest 进行测试时，有时候会出现 “‘yarn test’ 出现 Unexpected token ‘）’” 的问题，这是什么原因呢？如何解决这个问题呢？
问题原因
Jest 在运行测试时，会将代码转换成 ES5 的代码，然后再执行测试。而有些代码可能会包含一些 ES6 或者 ES7 的语法，例如箭头函数、async/await 等，而 Jest 默认是不支持这些语法的。因此，当我们在测试文件中使用这些语法时，就会出现 “‘yarn test’ 出现 Unexpected token ‘）’” 的错误。
解决方法
方法一：使用 Babel 转换器
一种解决方法是使用 Babel 转换器，将测试文件中的 ES6/ES7 语法转换成 ES5 语法。具体步骤如下：
- 安装 Babel 转换器
在项目的根目录下，使用以下命令安装 Babel 转换器：
npm install --save-dev babel-jest @babel/core @babel/preset-env
- 配置 Babel
在项目的根目录下，创建一个 .babelrc 文件，写入以下内容：
{
"presets": ["@babel/preset-env"]
}这个配置文件告诉 Babel 使用 @babel/preset-env 这个预设来转换代码。
- 修改 Jest 配置
在项目的根目录下，打开 package.json 文件，找到 Jest 的配置，将其修改为以下内容：
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}这个配置告诉 Jest 使用 babel-jest 插件来转换测试文件中的代码。
方法二：使用 @babel/preset-env 预设
另一种解决方法是使用 @babel/preset-env 预设。这个预设可以根据你的目标浏览器或者 Node.js 版本，自动转换代码。具体步骤如下：
- 安装 @babel/preset-env
在项目的根目录下，使用以下命令安装 @babel/preset-env：
npm install --save-dev @babel/preset-env
- 修改 Jest 配置
在项目的根目录下，打开 package.json 文件，找到 Jest 的配置，将其修改为以下内容：
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"preset": ["@babel/preset-env"]
}这个配置告诉 Jest 使用 @babel/preset-env 这个预设来转换测试文件中的代码。
示例代码
以下是一个包含 ES6 语法的测试文件：
import { sum } from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});如果你不做任何处理，运行 yarn test 命令时，就会出现 “‘yarn test’ 出现 Unexpected token ‘）’” 的错误。使用上面提到的两种方法之一，就可以解决这个问题。
总结
在使用 Jest 进行测试时，如果出现 “‘yarn test’ 出现 Unexpected token ‘）’” 的问题，可以使用 Babel 转换器或者 @babel/preset-env 预设来解决。这两种方法都可以将测试文件中的 ES6/ES7 语法转换成 ES5 语法，使得 Jest 可以正确地执行测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65853d5bd2f5e1655dfe7afb