Import ECharts.js modules manually results in SyntaxError: Unexpected token 'export' error when running Jest

[FibreFoX]

After loosing half a day of trying to have this working, there seems to be something broken when Jest is involved. The instructions in the README.md do not seem to be complete.

I have a fairly standard React v17 app (created via CRA), where I am using echarts-for-react.

When having something like this, it results in Jest-tests not working:

import ReactEChartsCore from "echarts-for-react/lib/core";
import echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import { GridComponent, TitleComponent, TooltipComponent, DataZoomComponent, DataZoomInsideComponent, DataZoomSliderComponent, LegendComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use(
    [
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DataZoomComponent,
        DataZoomInsideComponent,
        DataZoomSliderComponent,
        LegendComponent,
        LineChart,
        CanvasRenderer
    ]
);

export const SomeComponent: React.FC = () => {
    // ...
    return (
        <ReactEChartsCore
            echarts={echarts}
            option={options}
            showLoading={dataLoadingState !== "finished"} />
    );
};

Jest quits exploding with the following lines:

    C:\somepath\node_modules\echarts\lib\export\core.js:45
    export * from '../core/echarts.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

       6 | import type { EChartsOption } from "echarts-for-react";
       7 | import ReactEChartsCore from "echarts-for-react/lib/core";
    >  8 | import echarts from "echarts/lib/export/core";
         | ^
       9 | import { LineChart } from "echarts/charts";
      10 | import { GridComponent, TitleComponent, TooltipComponent, DataZoomComponent, DataZoomInsideComponent, DataZoomSliderComponent, LegendComponent } from "echarts/components";
      11 | import { CanvasRenderer } from "echarts/renderers";

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

With these lines it works .... but why? What am I missing?

import ReactECharts from "echarts-for-react";

export const SomeComponent: React.FC = () => {
    // ...
    return (
        <ReactECharts
            option={options}
            showLoading={dataLoadingState !== "finished"} />
    );
};

Just to be clear: it is only Jest here that seems to not work. When building my application, or running yarn start as normal, it works.

Some parts of the package.json from my project.

{
  // ...
  "scripts": {
    // ...
    "start": "cross-env REACT_APP_PRODUCT_VERSION=development react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
    // ...
  },
  "jest": {
    "coverageReporters": [
      "json",
      "lcov",
      "text-summary",
      "clover"
    ]
  },
  // ...
  "dependencies": {
    "echarts": "^5.3.3",
    "echarts-for-react": "^3.0.2",
    "react": "^17.0.2",
  },
  // ...
}

[FibreFoX]

Things that I stumbled upon that I tried with no luck: https://github.com/kulshekhar/ts-jest/issues/970 https://github.com/facebook/jest/issues/12036 https://github.com/facebook/jest/issues/9771 https://stackoverflow.com/questions/64999897/jest-syntaxerror-unexpected-token-export

[hustcc]

what is your nodejs、typescript version? try to upgrade them!

[FibreFoX]

@hustcc

used typescript-version: 4.8.3 used nodejs-version: 16.17.1 (LTS)

This maybe has something todo with ESM modules working different in TypeScript-context, what do you think?.

[NotSqrt]

~~In jest config, transformIgnorePatterns: ["/node_modules/(?!(echarts|zrender)/)"] seems to be bypass the problem ! See https://stackoverflow.com/questions/68467058/got-error-when-testing-vue-echarts-component-with-jest~~

Updated: fail ... the test was no longer loading echarts..

[FibreFoX]

@NotSqrt Have you checked that with the example provided by me? Because I already tried a lot.

[NotSqrt]

@FibreFoX Sorry, fail ... my test was no longer loading echarts..

[NotSqrt]

Related : https://github.com/apache/echarts/issues/16709

[NotSqrt]

I got a mock to work around the syntax error...

my regular file is echart-bundle.ts:

import EChartsReactCore from 'echarts-for-react/lib/core';

import * as echarts from 'echarts/core';
import {
    BarChart,
    LineChart,
    PieChart,
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    ToolboxComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent,
    DataZoomInsideComponent,
    DataZoomSliderComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    TooltipComponent,
    ToolboxComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent,
    DataZoomInsideComponent,
    DataZoomSliderComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    PieChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

// subclass to use our bundle for echarts
export class EChartsReact extends EChartsReactCore {
    static defaultProps = {
        echarts
    }
}

Then, I can bypass the syntax error by not importing from echarts/core at all:

__mocks__/echarts-bundle.ts

import EChartsReactCore from 'echarts-for-react/lib/core';

// subclass to use our bundle for echarts
export class EChartsReact extends EChartsReactCore {}

And in my tests, I can activate jest.mock('echart-bundle')

It no longer uses a smaller bundle, but at least the tests can run ..

[FibreFoX]

But thats the problem, when using all the given instructions for the minimal bundle. Having this "replaced" with a mock, does not solve that problem, it just obfruscates it.

I think the core problem comes from this ESM stuff, which might originate from https://github.com/apache/echarts/issues/16709#issuecomment-1215522586 (where I already posted something to make them aware).

But even echarts-for-react is not "at fault", the given instructions are faulty.