Import ECharts.js modules manually results in SyntaxError: Unexpected token 'export' error when running Jest #495
Description
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",
},
// ...
}