离子角度测试库 - 找不到模块“@angular/animations/browser”

Question

我正在尝试使用笑话和测试库与角度17

当我运行测试时，我得到：

   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'

这是我的 package.json 开发：

 "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,
    }
  };

Answer 1

通过运行以下命令，确保您已安装与您的 Angular 版本匹配的 @angular/animations：

npm i @angular/animations@17

即使您的组件不使用动画，角度测试环境也可能会加载动画作为测试渲染器默认设置的一部分，该默认设置使用 @angular/platform-browser 中的浏览器模块。这就是为什么 @testing-library/Angular 最终间接依赖于 @Angular/animations。