迁移Angular13与Jest28后测试报错processWithEsbuild不是函数

TypeError: configSet.processWithEsbuild is not a function 是典型的版本不兼容错误：Jest 28 正式移除了内部旧版的processWithEsbuildAPI，如果你项目里使用的jest-preset-angular、@angular-builders/jest版本没有适配Jest28的API变动，就会在处理ES模块的import语法时抛出该错误，测试运行器会把import首字母标记为错误位置。

• 第一步：卸载当前存在兼容问题的相关依赖

# npm 环境执行
npm uninstall jest @types/jest ts-jest jest-preset-angular @angular-builders/jest

# yarn 环境执行
yarn remove jest @types/jest ts-jest jest-preset-angular @angular-builders/jest

• 第二步：安装适配Angular 13 + Jest 28的对应版本依赖

注意：Angular 13 生态下适配Jest28的版本为jest-preset-angular@12.2.x、@angular-builders/jest@13.x、ts-jest@28.x，不要安装更高的大版本，否则会出现新的兼容问题。

# npm 环境执行
npm install jest@28.1.3 @types/jest@28.1.8 ts-jest@28.0.8 jest-preset-angular@12.2.3 @angular-builders/jest@13.0.1 --save-dev

# yarn 环境执行
yarn add jest@28.1.3 @types/jest@28.1.8 ts-jest@28.0.8 jest-preset-angular@12.2.3 @angular-builders/jest@13.0.1 --dev

• 第三步：校验项目配置
  1. 检查jest.config.js配置，确保预设配置正确，不要引用旧版本的预设路径，参考配置如下：

  module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    testPathIgnorePatterns: ['/node_modules/', '/dist/'],
    transform: {
      '^.+\\.(ts|js|html)$': 'jest-preset-angular'
    },
    globals: {
      'ts-jest': {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.html$'
      }
    }
  };
  

  2. 如果是通过Angular CLI运行测试，检查angular.json里test节点的builder配置为@angular-builders/jest:run即可，不需要额外修改其他参数。
• 第四步：清除Jest历史缓存后重新运行测试

npx jest --clearCache
npm run test

如果本地全局安装了其他大版本的Jest，优先调用项目本地node_modules内的Jest执行测试，避免全局版本和本地依赖冲突。

内容的提问来源于stack exchange，提问作者Vytautas Pranskunas