angularionic-frameworkts-jest

Jest is not finding module 'ionicons/components/ion-icon.js'

I am working on an ionic/angular application. For my unit tests environment Im using jest. It had worked till yesterday. Somehow all tests, where ionic modules (components, services, etc.) are included, failing now. There was now change to the node_modules or anything else related.

Thats the output from the cli.

 FAIL  projects/choosio-app/src/app/features/search/search-container.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'ionicons/components/ion-icon.js' from 'node_modules/@ionic/angular/fesm2022/ionic-angular-standalone.mjs'

    Require stack:
      node_modules/@ionic/angular/fesm2022/ionic-angular-standalone.mjs
      projects/choosio-core/src/lib/choosio-core/components/card/card.component.ts
      projects/choosio-core/src/public-api.ts
      projects/choosio-app/src/app/features/search/save-search-modal/save-search-modal.component.ts
      projects/choosio-app/src/app/features/search/search-container.component.ts
      projects/choosio-app/src/app/features/search/search-container.component.spec.ts

      1 | import { Component, input } from '@angular/core';
    > 2 | import { IonCard, IonCardContent, IonCardHeader, IonCardTitle } from '@ionic/angular/standalone';
        | ^
      3 | import { BASE_IMAGE_URL } from '../../../../../../choosio-app/src/app/shared/constants/base';
      4 |
      5 | @Component({

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (node_modules/@ionic/angular/fesm2022/ionic-angular-standalone.mjs:95:63)
      at Object.<anonymous> (projects/choosio-core/src/lib/choosio-core/components/card/card.component.ts:2:1)
      at Object.<anonymous> (projects/choosio-core/src/public-api.ts:48:1)
      at Object.<anonymous> (projects/choosio-app/src/app/features/search/save-search-modal/save-search-modal.component.ts:8:1)
      at Object.<anonymous> (projects/choosio-app/src/app/features/search/search-container.component.ts:14:1)
      at Object.<anonymous> (projects/choosio-app/src/app/features/search/search-container.component.spec.ts:2:1)

jest.config.js

module.exports = {
    preset: 'jest-preset-angular',
    transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|ionicons|@ionic|@stencil)`],
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    transform: {
        '^.+\\.tsx?$': [
            'ts-jest',
            {
                allowSyntheticDefaultImports: true,
            },
        ],
        '^.+\\.js$': 'babel-jest',
    },
};

Im aware of the hint from Ionic for the transformIgnorePatterns, but it changed nothing for me. I tried several different configurations and I was also not able to find any related issue.

tsconfig.spec.ts

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "jest", "@testing-library/jest-dom"
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ],
}

Hope thats enough of informations.

Thank you in advance, guys!

Solution

  • try to add this in moduleNameMapper in your jest config.

    'ionicons/components/ion-icon.js': '@ionic/core/components/ion-icon.js'

    it worked for me