Jest encountered an unexpected token when use the `amchart5` imports - jestjs

Question

I am getting this error by doing jest test with amchart5 integration.
Details:
C:\Users\BASHIMX5\Projects\Bitbucket\hf-ui\node_modules\#amcharts\amcharts5\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { Root } from "./.internal/core/Root";
^^^^^^
SyntaxError: Unexpected token 'export'
2 |
3 | import { ImplantReportComponent } from './implant-report.component';
> 4 | import * as am5 from '#amcharts/amcharts5';
| ^
5 | import * as am5xy from '#amcharts/amcharts5/xy';
6 | import am5themes_Animated from '#amcharts/amcharts5/themes/Animated';
7 |
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/app/pages/patient-account-management/component/implant-report/implant-report.component.spec.ts:4:1)
jest.preset:
const nxPreset = require('#nrwl/jest/preset').default;
module.exports = {
...nxPreset,
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular'
},
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)', "[/\\\\]node_modules[/\\\\](?!(#amcharts)\\/).+\\.js$", "^.+\\.module\\.(css|sass|scss)$"],
resolver: '#nrwl/jest/plugins/resolver',
coverageReporters: ['text', 'text-summary', "html", "cobertura"],
moduleFileExtensions: ['ts', 'js', 'html'],
globals: {
crypto: require('crypto'),
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
"reporters": ["default", "jest-junit"]
};
mock:
node_modules/
__mocks__/
├─ #amcharts/
│ ├─ amcharts5/
│ │ ├─ themes/
│ │ │ ├─ Animated.js
│ │ ├─ index.js
│ │ ├─ xy.js
But getting the above error. any help? I spend moreover 24 hr to fix. but no luck. I am running nx worksapce.

Answer 1

I was able to get past this by removing the es6 module regex in the transformIgnorePatterns settings. Also if you have other libraries/apps consuming this library, they also need to have the same regex settings in their transformIgnorePatterns.
const nxPreset = require('#nrwl/jest/preset').default;
module.exports = {
...nxPreset,
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular'
},
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\](?!(#amcharts)\\/).+\\.js$', '^.+\\.module\\.(css|sass|scss)$'],
resolver: '#nrwl/jest/plugins/resolver',
coverageReporters: ['text', 'text-summary', "html", "cobertura"],
moduleFileExtensions: ['ts', 'js', 'html'],
globals: {
crypto: require('crypto'),
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
"reporters": ["default", "jest-junit"]
};