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

Continue reading...