解决 Jest 运行时提示 “SyntaxError: Unexpected Token” 错误的方法

在进行前端开发时，Jest 是一个常用的测试框架，但是在使用 Jest 进行测试时可能会遇到 “SyntaxError: Unexpected Token” 错误，这是由于 Jest 默认无法识别某些语法或语言特性导致的。

本文将介绍解决 Jest 运行时提示 “SyntaxError: Unexpected Token” 错误的方法，帮助读者更好地使用 Jest 进行测试。

问题原因

在使用 Jest 进行测试时，可能会遇到以下错误信息：

Test suite failed to run

SyntaxError: Unexpected token

这种错误通常是由于 Jest 默认无法识别某些语法或语言特性导致的，如 ES6 的 import/export 语句、JSX 语法等。

解决方法

1. 配置 Babel

Babel 是一个 JavaScript 编译器，可以将 ES6/7/8 代码转换为 ES5 代码，从而支持在旧版浏览器中运行。

在 Jest 中，可以通过配置 Babel 来解决 “SyntaxError: Unexpected Token” 错误。具体步骤如下：

1. 安装 babel-jest 和 @babel/core：

   npm install --save-dev babel-jest @babel/core

2. 创建 .babelrc 文件，并添加以下内容：

   {
     "presets": ["@babel/preset-env"]
   }

   这里我们使用 @babel/preset-env 来将 ES6 代码转换为 ES5 代码。

3. 在 package.json 中添加以下配置：

   "jest": {
     "transform": {
       "^.+\\.js$": "babel-jest"
     }
   }

   这里我们将所有 .js 文件都通过 babel-jest 进行转换。

2. 配置 Jest

除了配置 Babel，还可以通过配置 Jest 来解决 “SyntaxError: Unexpected Token” 错误。具体步骤如下：

1. 安装支持所需语言特性的相关依赖，如：

   npm install --save-dev @babel/preset-env @babel/preset-react

   这里我们安装了 @babel/preset-env 和 @babel/preset-react，用于支持 ES6 和 JSX 语法。

2. 在 package.json 中添加以下配置：

   // javascriptcn.com 代码示例
   "jest": {
     "transform": {
       "^.+\\.jsx?$": "babel-jest"
     },
     "transformIgnorePatterns": [
       "/node_modules/"
     ],
     "moduleFileExtensions": [
       "js",
       "jsx",
       "json",
       "node"
     ],
     "moduleNameMapper": {
       "\\.(css|less|scss)$": "identity-obj-proxy"
     }
   }

   这里我们配置了以下内容：

   • transform：将所有 .jsx 文件通过 babel-jest 进行转换。
   • transformIgnorePatterns：忽略 node_modules 目录下的文件。
   • moduleFileExtensions：支持的文件扩展名。
   • moduleNameMapper：用于处理 CSS 文件的模块映射。

示例代码

下面是一个使用 Jest 进行测试的示例代码：

import { sum } from '../src/math';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

在使用 Jest 进行测试时，如果遇到类似 “SyntaxError: Unexpected Token” 的错误，可以尝试以上两种解决方法，从而使测试顺利运行。

总结

Jest 是一个非常好用的测试框架，但是在使用过程中可能会遇到 “SyntaxError: Unexpected Token” 错误。本文介绍了两种解决方法，希望能帮助读者更好地使用 Jest 进行测试。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65112eda95b1f8cacd990033