Jest Test failed with Angular 14 ans ng2-charts 3.1.0

[JeremieLapert]

After update ng2-charts 3.0.11 to 3.1.0, i have an error in my test

Test suite failed to run and error is on import of NgChartsModule

TypeError: import_chart.registerables is not iterable (cannot read property undefined)

  13 | import { RecommendationChartProperties } from '../../../../../models/bbox-budget-chart.model';
  14 | import { getTranslocoModule } from '../../../../../specUtils/Transloco-testing.module';
> 15 | import { NgChartsModule } from 'ng2-charts';
     | ^
  16 | import { ObjectiveType } from '../../../../../enums/ObjectiveType.enum';
  17 | import { RouterTestingModule } from '@angular/router/testing';
  18 | import { TranslocoLocaleModule } from '@ngneat/transloco-locale';

  at Object.<anonymous> (../../node_modules/ng2-charts/fesm2015/ng2-charts.mjs:257:7)
  at Object.<anonymous> (src/app/components/recommendation/proposals/global-kpi/budget-chart/budget-chart.component.spec.ts:15:1)
  at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (../../node_modules/@jest/core/build/runJest.js:404:19)
  at _run10000 (../../node_modules/@jest/core/build/cli/index.js:320:7)
  at runCLI (../../node_modules/@jest/core/build/cli/index.js:173:3)

[santam85]

Can you provide a simple reproduction stackBlitz?

[MichaelKaaden]

I've got the same problem.

Here's a minimal reproduction: https://github.com/MichaelKaaden/ng2-chartjs-reproduction
Please first run "yarn install" and then "yarn nx test".

[santam85]

This seems to be triggered by a combination of this change (v3.0.11...v3.1.1#diff-59a80d7c502ca2579fca52689216fbe25c68a75d010871cec3baefdb785fd379R3). Looks like this might be a bug in the ts-jest transformer?

[JeremieLapert]

This seems to be triggered by a combination of this change (v3.0.11...v3.1.1diff-59a80d7c502ca2579fca52689216fbe25c68a75d010871cec3baefdb785fd379R3). Looks like this might be a bug in the ts-jest transformer?

I try to deal with tranformer in jest.config.ts but the result is the same....

[SuneRadich]

I am in the process of upgrading our nx monorepo (and in turn also upgrade from Angular 13 to Angular 14). A bunch of my existing unit tests now fail with this error. I have narrowed it down to a working setup if I use ng2-charts 3.0.11. But my tests work fine. But on 3.1.x and 4.0.0 I see the error.

[xMonkfish]

Adding the below into my jest.config fixed this error for me using 4.0.0, although I'm not sure what (if any) side effects there will be.

  moduleNameMapper: {
    '^lodash-es$': 'lodash',
    'chart.js': 'node_modules/chart.js/dist/chart.mjs'
  }

[FernandoFHS]

I had the same problem and I managed to solve it by updating Jest to version jest@28.1.3

[btvanhooser]

Adding the below into my jest.config fixed this error for me using 4.0.0, although I'm not sure what (if any) side effects there will be.

  moduleNameMapper: {
    '^lodash-es$': 'lodash',
    'chart.js': 'node_modules/chart.js/dist/chart.mjs'
  }

Note: for my case I needed

'chart.js': '<rootDir>node_modules/chart.js/dist/chart.mjs'

I was getting an exception about no module being at "node_modules/chart.js/dist/chart.mjs"

[Frozen-byte]

In jest.config.js

  moduleNameMapper: {
    '^lodash-es$': 'lodash', // https://github.com/valor-software/ng2-charts/issues/1291
    'chart.js': '<rootDir>node_modules/chart.js/dist/chart.mjs', // https://github.com/valor-software/ng2-charts/issues/1421
  },

Worked just fine, thank you!

[DetlefPeters]

Doesn't work for me - there is no 'chart.mjs' in chart.js v4 :(

[flavianh]

Worked for me when I added "chart.js" in transformIgnorePatterns:

// jest.config.js

const esModules = [
   ...
  "ng2-charts",
  "chart.js",
].join("|");
{
  ...
  transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules})`],
}

[DetlefPeters]

After the latest updates of chart.js, it is working for me again without using any workarounds :) IIRC using chart.js v4.1.1 or newer solves this issue, so that is was only a problem for chart.js versions v4.0.0 - 4.1.0.