Testing library on ionic angular - Cannot find module '@angular/animations/browser'

I'm trying to use jest and testing library with angular 17

When I run tests, I get :

   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'

Here my package.json dev :

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

My setup.jest.ts :

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

And the 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,
    }
  };

Make sure you have installed @angular/animations matching your Angular version, by running this command:

npm i @angular/animations@17

Even if your components don't use animations, angular testing environment might load animations as part of the test renderer's default setup, which uses browser modules from @angular/platform-browser. This is why @testing-library/angular ends up relying on @angular/animations indirectly.