Unable to use amCharts in tests: export { System, system } from "./.internal/core/System";

[hutber]

I am using a fairly basic site setup with react-create-app and then importing as the documentation suggests:
import * as am4core from '@amcharts/amcharts4/core'

There is no problem at all whilst using the charts, however when I run them in the test environment they fail with the below error.

   Details:

    /var/www/management/node/node_modules/@amcharts/amcharts4/core.js:8
    export { System, system } from "./.internal/core/System";
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      2 | import React from 'react'
      3 | import PropTypes from 'prop-types'
    > 4 | import * as am4core from '@amcharts/amcharts4/core'
        | ^
      5 | import * as am4maps from '@amcharts/amcharts4/maps'
      6 | import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow'
      7 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/digitalAssetManager/Overview/components/ProvenanceChart/index.js:4:1)

Versions

amcharts4: v4.8.1
react-scripts: v3.3.0

ProvenanceChart/index.js

/* eslint-disable no-unused-vars */
import React from 'react'
import * as am4core from '@amcharts/amcharts4/core'
import * as am4maps from '@amcharts/amcharts4/maps'
import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow'

import am4themes_animated from '@amcharts/amcharts4/themes/animated'

import { theme } from 'config/theme'

am4core.useTheme(am4themes_animated)

class ProvenanceChart extends React.Component {

I do not believe I am doing anything outwardly different from a standard stack.

Test in question:

  it('should render', () => {
    expect(renderer.create(getComponent()).toJSON()).toMatchSnapshot()
  })

Project jest.config.js

module.exports = {
  "roots": [
    "<rootDir>/node/src"
  ],
  "moduleFileExtensions": [
    "js",
    "jsx",
    "json",
    "node"
  ],
  "verbose": true,
  "testEnvironment": 'node',
  "testURL": 'http://localhost:3000',
  "setupFiles": ["jest-canvas-mock"],
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
      //// setup file
       //import { configure } from 'enzyme';
       //import 'jest-canvas-mock';
       //import Adapter from 'enzyme-adapter-react-16';

       //configure({ adapter: new Adapter() });
}

Then finally ran with npm test

[Pauan]

@hutber You need to add this to your Jest configuration:

"transformIgnorePatterns": [
    "node_modules[/\\\\](?!@amcharts[/\\\\]amcharts4)"
]

[hutber]

Thanks again

[tuhin47]

@Pauan thanks a lot

[KFuczek]

@Pauan You are a genius

[johnpankowicz]

@Pauan I have the same error as hutber. I made your changes to the Jest configuration but I still get the same error.

[ Edit: I just found this link that says Jest does not work with amcharts. If that's still true then there is no solution. ]

    Details:

    C:\GOVMEETING\_SOURCECODE\frontend\clientapp\node_modules\@amcharts\amcharts4\core.js:8
    export { System, system } from "./.internal/core/System";
    ^^^^^^

    SyntaxError: Unexpected token 'export'
        at compileFunction (<anonymous>)

      1 | import { Component, OnInit } from '@angular/core';
    > 2 | import * as am4core from '@amcharts/amcharts4/core';
        | ^
      3 | import * as am4charts from '@amcharts/amcharts4/charts';

Here is my jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage/my-app',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: '<rootDir>/',
  }),
  transformIgnorePatterns: ['node_modules[/\\\\](?!@amcharts[/\\\\]amcharts4)'],
};

And here is my package.json

  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.10",
    "@angular/cli": "~9.1.10",
    "@angular/compiler-cli": "~9.1.11",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^26.0.8",
    "@types/node": "^12.11.1",
    "angular-http-server": "^1.9.0",
    "codelyzer": "^5.1.2",
    "cypress": "^4.11.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^26.2.2",
    "jest-preset-angular": "^8.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.5",
    "protractor": "~7.0.0",
    "puppeteer": "^5.2.1",
    "start-server-and-test": "^1.11.2",
    "ts-jest": "^26.2.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }

[kaidohallik]

I also encountered this error in one project configuration (some component in library is using amCharts and this library is imported in another library) and adding

transformIgnorePatterns: [
    'node_modules[/\\\\](?!@amcharts[/\\\\]amcharts4)'
]

to Jest configuration was not enough in this case.

The following additional steps needed to solve this problem:

• add to Jest configuration:

transform: {
  "^.+\\.js$": "babel-jest"
},

• add @babel/preset-env dependnecy: npm install --save-dev @babel/preset-env
• add babel.config.js configuration file with the following content:

module.exports = function(api) {
  api.cache(true);

  const presets = ['@babel/preset-env'];
  const plugins = [];

  return {
    presets,
    plugins,
  };
};

[giang21199z]

@hutber You need to add this to your Jest configuration:

"transformIgnorePatterns": [
    "node_modules[/\\\\](?!@amcharts[/\\\\]amcharts4)"
]

I also faced same issue but I used Angular FW.
I think many people are same.
I was confused with your regex patterns.
I have a simple regex bellow.

transformIgnorePatterns: [
    "node_modules/(?!(ng-pick-datetime-moment|@amcharts/amcharts4))"
  ]

the ?! is important because it means ignore everything in the node_modules EXCEPT for ng-pick-datetime-moment and @amcharts/amcharts4 packages.
Anyway, Thank you so much.

[Pauan]

@giang21199z I was confused with your regex patterns.

That is so it will work on both Windows and Linux/Mac, because Windows uses \ for the directory separator.

[giang21199z]

@giang21199z I was confused with your regex patterns.

That is so it will work on both Windows and Linux/Mac, because Windows uses \ for the directory separator.

Oh. Let me check it again. Thanks for your reply. :)

[arielhj]

@giang21199z I was confused with your regex patterns.

That is so it will work on both Windows and Linux/Mac, because Windows uses \ for the directory separator.

Oh. Let me check it again. Thanks for your reply. :)

I did everything recommended before and it doesn't work for me. I am using nwrl.

here is my jest config:
module.exports = {
testMatch: ['**/+(*.)+(spec|test).+(ts)?(x)'],
transform: {
'^.+\.(ts|html)$': 'ts-jest'
},
setupFiles: [ 'jest-canvas-mock'],
resolver: '@nrwl/jest/plugins/resolver',
moduleFileExtensions: ['ts', 'js', 'html'],
coverageReporters: ['html', 'lcov', 'text'],
passWithNoTests: true,
transformIgnorePatterns: ["node_modules", "node_modules/?!(vis-data)", "node_modules/?!(@amchart)" ],
snapshotSerializers: [
'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js'
]
};

[Pauan]

@arielhj Try this:

transformIgnorePatterns: ["node_modules/(?!vis-data|@amcharts)"],

[giang21199z]

@arielhj Try this:

transformIgnorePatterns: ["node_modules/(?!vis-data|@amcharts)"],

Maybe transformIgnorePatterns has an array but we have only one item.
It can be confused for developers.