Ionic Angular中使用Testing Library报错：找不到@angular/animations/browser模块

错误信息 #

运行测试时触发如下错误：

Cannot find module '@angular/animations/browser' from 'node_modules/@angular/platform-browser/fesm2022/animations.mjs'

Require stack:
  node_modules/@angular/platform-browser/fesm2022/animations.mjs
  node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs
  src/app/components/btn-navigate-maps/bt-navigate-maps.spec.ts

> 1 | import {render, screen, fireEvent, aliasedInput} from '@testing-library/angular'

项目环境配置 #

devDependencies #

"devDependencies": {
  "@angular-devkit/build-angular": "17.3.9",
  "@angular-eslint/builder": "18.3.1",
  "@angular-eslint/eslint-plugin": "18.3.1",
  "@angular-eslint/eslint-plugin-template": "18.3.1",
  "@angular-eslint/schematics": "18.3.1",
  "@angular-eslint/template-parser": "18.3.1",
  "@angular/cli": "17.3.9",
  "@angular/compiler": "17.3.9",
  "@angular/compiler-cli": "17.3.9",
  "@angular/language-service": "17.3.9",
  "@capacitor/assets": "^3.0.4",
  "@capacitor/cli": "^6.1.2",
  "@ionic/angular-toolkit": "^8.0.0",
  "@jest/globals": "^29.7.0",
  "@testing-library/angular": "^17.3.1",
  "@testing-library/dom": "^10.4.0",
  "@testing-library/jest-dom": "^6.6.2",
  "@testing-library/user-event": "^14.5.2",
  "@types/google-libphonenumber": "^7.4.26",
  "@types/inputmask": "^5.0.7",
  "@types/jest": "^29.5.14",
  "@types/node": "^12.20.55",
  "@types/uuid": "^9.0.2",
  "@typescript-eslint/eslint-plugin": "^8.8.1",
  "@typescript-eslint/parser": "^8.8.1",
  "eslint": "^9.12.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-prettier": "^5.2.1",
  "jest": "^29.7.0",
  "jest-environment-jsdom": "^29.7.0",
  "jest-preset-angular": "^14.2.4",
  "jest-runner-groups": "^2.2.0",
  "nodemon": "^3.1.4",
  "npm-watch": "^0.13.0",
  "prettier": "^3.3.3",
  "ts-jest": "^29.2.5",
  "ts-node": "~8.3.0",
  "typescript": "5.4.4"
},

setup.jest.ts #

import 'jest-preset-angular/setup-jest';
import '@testing-library/jest-dom';

jest.config.js #

globalThis.ngJest = {
    skipNgcc: true,
    tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig
  };
  
  /** @type {import('@jest/types').Config.InitialOptions} */
  module.exports = {
    preset: 'jest-preset-angular',
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['<rootDir>/setup.jest.ts'],
    transform: {
      '^.+\\.ts$': 'ts-jest', // Only transform .ts files
    },
    transformIgnorePatterns: [
      '/node_modules/(?!flat)/', // Exclude modules except 'flat' from transformation
    ],
    moduleDirectories: ['node_modules', 'src'],
    fakeTimers: {
      enableGlobally: true,
    }
  };

解决步骤 #

1. 安装缺失的动画依赖
   错误核心是缺少@angular/animations包，执行命令安装与项目Angular版本匹配的依赖：

   npm install @angular/animations@17.3.9 --save
   

2. 调整Jest的模块转换规则
   修改jest.config.js中的transformIgnorePatterns，让Jest能转换Angular相关模块：

   transformIgnorePatterns: [
     '/node_modules/(?!@angular|@testing-library|flat)/',
   ],
   

3. 检查TypeScript配置
   确保tsconfig.spec.json的compilerOptions中添加Angular模块路径映射：

   "compilerOptions": {
     "paths": {
       "@angular/*": ["./node_modules/@angular/*"]
     }
   }
   

4. 清理缓存并重装依赖
   执行以下命令解决缓存或依赖冲突问题：

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   

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