Jest使用ES模块模式时mock第三方模块失败报错如何解决

问题核心原因 #

你的项目配置了"type": "module"使用原生ES模块，同时Jest配置中transform字段为空，导致Jest无法自动将jest.mock语句提升到模块导入之前执行，实际导入的还是原生的axios模块，因此axios.get上不存在Mock函数特有的mockResolvedValue方法。

解决方案 #

方案1：补全Babel转译配置（推荐，兼容性更好）

1. 修改jest.config.js，补充transform规则，让babel处理JS和Vue文件，确保jest.mock可以被正常提升：

export default {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  // 保留原有其他配置不变
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/tests/client/unit/__mocks__/fileMock.js',
    '\\.(css|less)$': '<rootDir>/tests/client/unit/__mocks__/styleMock.js',
    '^@/(.*)$': '<rootDir>/$1'
  },
  // 剩余配置保持原样
}

2. 调整测试文件代码顺序，确保jest.mock调用在所有导入语句之前（可选，转译正常会自动提升，调整后更稳妥）：

import { jest } from '@jest/globals'
// 把jest.mock放在最前面
jest.mock('axios')
import axios from 'axios'
import Users from './users'

// 测试逻辑保持不变
test('should fetch users', () => {
  const users = [ { name: 'Bob' } ]
  const resp = { data: users }
  axios.get.mockResolvedValue(resp)
  return Users.all().then(data => expect(data).toEqual(users))
})

方案2：使用Jest原生ES模块支持

如果你不想通过Babel转译，可以直接开启Jest的原生ES模块支持：

1. 修改jest.config.js，新增ES模块相关配置：

export default {
  extensionsToTreatAsEsm: ['.js'],
  // 其他原有配置保留
}

2. 修改package.json中的Jest执行脚本，添加实验性VM模块参数：

{
  "scripts": {
    "front-unit-tests": "cross-env NODE_OPTIONS=--experimental-vm-modules jest tests/client/unit",
    // 其他jest相关的脚本如ci-test、back-tests都需要添加相同的NODE_OPTIONS参数
  }
}

修改完成后重新运行测试即可正常mock axios。

内容的提问来源于stack exchange，提问作者Rémi Doolaeghe