问题描述
在使用 Jest 进行前端测试时，我们可能会遇到以下错误：
SyntaxError: Unexpected token &&
具体代码如下：
describe('test', () => {
it('should pass', () => {
expect(true && false).toBeFalsy()
})
})此时 Jest 会抛出上面的错误，并提示意外的 && 符号。
问题原因
这是由于在 Jest 中默认情况下使用的运行环境是 jsdom，而 jsdom 中不支持 ES6 的某些语法特性，例如：
- Class 和箭头函数（可以通过引入
@babel/preset-env解决）； - 数组的
includes方法和字符串模板标记（可以通过引入@babel/polyfill解决）； - 逻辑运算符（如
&&和||）的特定类型（例如，选择性语句或三元运算符）。
对于最后一种情况，jsdom 不支持使用选择性语句或三元运算符的逻辑运算符。而上述示例代码中正是使用了逻辑运算符的选择性语句，故在测试过程中遇到了 SyntaxError。
解决方案
有以下两种解决方案，可以帮助我们解决此类问题：
1. 在 Jest 配置中添加 setupFilesAfterEnv
通过在 Jest 配置中指定 setupFilesAfterEnv 选项，我们可以在测试运行之前为测试环境添加新的全局变量、 Polyfill、打补丁（patches）等。具体而言，我们需要在配置文件中指定以下内容：
// jest.config.js
module.exports = {
setupFilesAfterEnv: ['<rootDir>/tests/setup.js']
}然后在 setup.js 文件中，我们可以为运行环境添加如下代码，解决语法解析错误：
// setup.js
global.Boolean.prototype.__and__ = function(b) { return this.valueOf() && b };这样，我们就为全局的 Boolean 类型添加了一个名为 __and__ 的新方法，用于支持逻辑运算符的选择性语句。
最后，在测试代码中，我们就能无需任何变化地使用逻辑运算符的选择性语句了：
describe('test', () => {
it('should pass', () => {
expect(true.__and__(false)).toBeFalsy()
})
})2. 安装并配置 babel
另一种解决方案是安装并配置 babel，在 Jest 运行测试时进行源代码的编译，以支持 ES6 以上的一些语法特性。
首先，我们需要安装相关依赖：
npm install --dev @babel/cli @babel/core @babel/preset-env jest @babel/polyfill
然后，我们需要在项目根目录下添加 .babelrc 配置文件：
{
"presets": ["@babel/preset-env"]
}最后，在 jest 配置文件中添加以下内容，使用 babel-jest 重新处理代码：
// jest.config.js
module.exports = {
transform: {
'^.+\\.js$': 'babel-jest'
}
}此时，我们就可以在测试代码中轻松使用选择性语句的逻辑运算符了：
describe('test', () => {
it('should pass', () => {
expect(true && false).toBeFalsy()
})
})总结
这篇文章介绍了如何解决在使用 Jest 进行前端测试时遇到的 SyntaxError: Unexpected token && 错误。我们可以通过添加全局变量或安装 babel 等方式解决此类问题。掌握这些技巧可以让我们更加健壮和高效地进行测试，并且避免一些不必要的错误和问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e99539f6b2d6eab34d1df2