@Swimlane/ngx-charts 20.4.1 not working with Jest in angular v:16.0.1

[nikhil1986m]

We have recently migrated the code from Angular 13 to Angular 16. As part of the migration activity to remove vulnerabilities of ngx-charts we have also migrated this package from v: 20.1.2 to 20.4.1. After migration, we tested our components and everything is working fine except the JS tests using the JEST framework.

With v16 angular + ngx-charts (20.1.2) all the javascript tests are working fine but with the latest one (20.4.1), tests started failing with the JEST framework. We are blocked and need some quick help on this.

Below is the Error:

C:\Repos\Portal\ClientApp\node_modules\@swimlane\ngx-charts\node_modules\d3-selection\src\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as create } from "./create.js";
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      38 | import { CacheManagementService } from '@shared/services/cache-management.service';
      39 | import { CustomTranslateLoader } from '@app/test/translationLoader/custom-translate-loader.mock';
    > 40 | import { NgxChartsModule } from '@swimlane/ngx-charts';
         | ^
      41 |
      42 | const translateModules = {
      43 |   import: TranslateModule.forRoot({

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.require (node_modules/@swimlane/ngx-charts/fesm2020/swimlane-ngx-charts.mjs:183:27)
      at Object.<anonymous> (src/app/pages/home/home.component.spec.ts:40:1)
      

I tried updating Jest.config.JS based on this GitHub article (nrwl/nx#7844 (comment)), but it is not working. Requesting the community to kindly help on the same.

[nikhil1986m]

Hi Community,

Could you kindly help with this issue? Thanks.

[Valera]

I am using nx tool and I had the same issue with Angular 15. I was able to fix it (suppress the warning) by applying the changes to jest.config.ts file from this comment here: nrwl/nx#7844 (comment)

// Modules throwing error "Jest encountered an unexpected token"
const esModules = ['@swimlane'];

export default {
  ...
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`,
  ],
};

[Reuven Starodubski]

Any update on this?
IgnorePatterns didn’t help me either.
Using angular 14 with charts 20.4.1

[Reuven Starodubski]

Hi Community,

Could you kindly help with this issue? Thanks.

Try to add these lines to ignorePatterns:

	'@swimlane',
	'lodash-es',
	'd3-*',
	'internmap'

[nikhil1986m]

Thanks, @mixmind & @TrueMan777. All the jest tests passed with the usage of the below statements.

Working Solution:

// Modules throwing error "Jest encountered an unexpected token"
const esModules = ['@swimlane',
	'lodash-es',
	'd3-*',
	'internmap'];

export default {
  ...
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`,
  ],
};

[Billy Lando]

@nikhil1986m Do you also have the issue that transformIgnorePatterns slow down your Jest tests?

[nikhil1986m]

@nikhil1986m Do you also have the issue that transformIgnorePatterns slow down your Jest tests?

Nopes it working fine.