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

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.

Did you ever find a resolution to this amcharts5, nx, and jest integration? — droidalmatter, Nov 10 '22 at 20:52

score 1 · Answer 1 · answered Nov 10 '22 at 23:57

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"]
};

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

1 Answers1