在使用 Jest 进行前端测试的过程中，有时会出现 "Unexpected token" 错误，这种错误通常是由于语法错误或者模块加载错误引起的。本篇文章将详细介绍 Jest 运行过程中出现 "Unexpected token" 错误的原因以及如何处理这种错误。
原因分析
在使用 Jest 进行测试时，通常会在测试文件中引入被测试的模块或者第三方库。如果被测试的模块或者第三方库中存在语法错误或者模块加载错误，就会出现 "Unexpected token" 错误。
例如，我们有一个被测试的模块 math.js，其中存在语法错误：
-- -------------------- ---- ------- -------- ------ -- - ------ - - - - -------- ------ -- - ------ - - - - -- -------- -------------- - - ---- ---展开代码
当我们在测试文件中引入这个模块时，就会出现 "Unexpected token" 错误：
-- -------------------- ---- ------- ----- - ---- --- - - ----------------- ----------- -- -- - ------------- ----------- -- ----------- -- -- - ------------- ----------- --展开代码
错误信息如下：
/home/user/project/math.js:9 module.exports = { ^ SyntaxError: Unexpected token 'exports'
解决方案
1. 修复语法错误
当出现 "Unexpected token" 错误时，首先需要检查被测试的模块或者第三方库中是否存在语法错误。如果存在语法错误，需要及时修复。
在上面的例子中，我们可以在 math.js 文件中添加一个右括号来修复语法错误：
-- -------------------- ---- ------- -------- ------ -- - ------ - - - - -------- ------ -- - ------ - - - - -------------- - - ---- --- -展开代码
2. 添加 babel-jest 支持
如果被测试的模块或者第三方库中使用了 ES6 或者其他高级语法特性，需要在 Jest 中添加 babel-jest 支持。babel-jest 可以将 ES6 或者其他高级语法特性转换为 ES5 语法，从而避免出现 "Unexpected token" 错误。
首先需要安装 babel-jest：
npm install --save-dev babel-jest
然后在 Jest 配置文件中添加以下配置：
module.exports = { transform: { '^.+\\.jsx?$': 'babel-jest' } }
3. 添加 moduleNameMapper 支持
如果被测试的模块或者第三方库中使用了相对路径引用其他模块，需要在 Jest 中添加 moduleNameMapper 支持。moduleNameMapper 可以将相对路径转换为绝对路径，从而避免出现模块加载错误。
例如，我们有一个被测试的模块 math.js，其中引用了另一个模块 utils.js：
-- -------------------- ---- ------- ----- - --- - - ------------------ -------- ------ -- - ------ ------ --- - -------------- - - --- -展开代码
当我们在测试文件中引入这个模块时，就会出现模块加载错误：
const { sub } = require('./math') test('sub', () => { expect(sub(2, 1)).toBe(1) })
错误信息如下：
Cannot find module './utils' from 'math.js'
我们可以在 Jest 配置文件中添加以下配置来解决这个问题：
module.exports = { moduleNameMapper: { '^\\./(.*)$': '<rootDir>/$1' } }
这个配置将相对路径转换为绝对路径，从而避免了模块加载错误。
总结
在使用 Jest 进行测试时，出现 "Unexpected token" 错误通常是由于语法错误或者模块加载错误引起的。解决这种错误的方法有修复语法错误、添加 babel-jest 支持和添加 moduleNameMapper 支持等。通过本篇文章的学习，相信大家已经掌握了解决 "Unexpected token" 错误的方法，能够更加顺利地进行前端测试工作了。
示例代码
math.js 文件：
-- -------------------- ---- ------- ----- - --- - - ------------------ -------- ------ -- - ------ ------ --- - -------------- - - --- -展开代码
utils.js 文件：
function add(a, b) { return a + b } module.exports = { add }
测试文件：
const { sub } = require('./math') test('sub', () => { expect(sub(2, 1)).toBe(1) })
Jest 配置文件：
module.exports = { transform: { '^.+\\.jsx?$': 'babel-jest' }, moduleNameMapper: { '^\\./(.*)$': '<rootDir>/$1' } }
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660c7ca8d10417a222cbaef3
