解决 Jest 中的 “Unexpected token” 错误-FunTeaLearn Online Web Tutorials

在使用 Jest 进行前端单元测试时，经常会遇到 “Unexpected token” 错误。这个错误通常是由于 Jest 无法识别某些新的语法特性或者导入的模块不能被正确解析所引起的。本文将介绍如何解决这个错误，并提供详细的解释和示例代码。

什么是 “Unexpected token” 错误？

“Unexpected token” 错误是指在执行 Jest 测试时，遇到了无法识别的语法或者模块导入错误，导致测试无法通过的错误。常见的错误信息如下：

● Test suite failed to run

/Users/xxx/xxx/xxx.js:1
(function (exports, require, module, __filename, __dirname) { import xxx from 'xxx';
                                                                     ^

SyntaxError: Unexpected token import

上面的错误信息表示，在执行测试时，遇到了无法识别的 import 语法，导致测试失败。

如何解决 “Unexpected token” 错误？

1. 配置 Jest 支持新的语法特性

Jest 默认只支持 ES5 语法，如果你在测试中使用了 ES6 或者更高版本的语法特性，需要在 Jest 配置文件中添加相应的配置项。比如，我们可以在 package.json 文件中添加以下配置：

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

上面的配置项表示，使用 Babel 转换器将所有 .js 和 .jsx 文件转换为 ES5 语法。

2. 配置 Jest 支持模块导入

如果你在测试中使用了模块导入语法，比如 import 或者 require，需要配置 Jest 支持模块导入。我们可以在 Jest 配置文件中添加以下配置：

// www.javascriptcn.com code example
{
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

上面的配置项中，moduleFileExtensions 表示 Jest 支持的文件扩展名，moduleNameMapper 表示模块路径的映射关系。比如，我们可以将 @/ 映射为 src/，这样就可以在测试中直接使用 import 语法导入模块了。

3. 配置 Jest 支持 CSS

如果你在测试中使用了 CSS 样式，需要配置 Jest 支持 CSS。我们可以在 Jest 配置文件中添加以下配置：

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
    }
  }
}

上面的配置项中，moduleNameMapper 表示模块路径的映射关系。identity-obj-proxy 是一个虚拟模块，可以将 CSS 样式转换为一个对象，从而在测试中使用。

示例代码

下面是一个示例代码，演示如何在 Jest 中使用 ES6 语法、模块导入和 CSS 样式：

// www.javascriptcn.com code example
import React from 'react';
import { shallow } from 'enzyme';
import App from '@/components/App';
import '@/styles/index.scss';

describe('App Component', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find('.app')).toHaveLength(1);
  });
});

上面的代码中，我们使用了 ES6 语法的 import 和箭头函数，使用了模块导入的方式导入了 React 组件和 CSS 样式。在 Jest 配置文件中添加上述配置项后，这个测试就可以正常运行了。

总结

在使用 Jest 进行前端单元测试时，遇到 “Unexpected token” 错误是比较常见的问题。我们可以通过配置 Jest 支持新的语法特性、模块导入和 CSS 样式来解决这个问题。希望本文能够对大家有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65808c7ed2f5e1655dbbb32e

解决 Jest 中的 “Unexpected token” 错误