Using amCharts 5 with Jest

This tutorial will show you how to create unit tests for Jest.

Jest does not support ES6 modules by default, but you can still use ES6 modules if you use Babel.

Installation

You must install the following packages in your package.json:

"dependencies": {
  "@amcharts/amcharts5": "^5.21.4"
},
"devDependencies": {
  "@babel/core": "^7.18.10",
  "@babel/preset-env": "^7.18.10",
  "@babel/preset-typescript": "^7.18.6",
  "babel-jest": "^28.1.3",
  "jest-environment-jsdom": "^28.1.3",
  "jest": "^28.1.3",
  "canvas": "^2.9.3"
}

And you must add this "jest" configuration to your package.json:

"jest": {
  "testEnvironment": "jsdom",
  "transformIgnorePatterns": [
    "/node_modules/(?!@amcharts|d3-|internmap)"
  ]
}

Now you must do npm install or yarn install.

Lastly create a babel.config.js file:

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

Writing tests

Now that you have everything setup, you can write your unit tests.

Let’s say that your chart code is in a chart.js file:

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

export function makeChart() {
  const root = am5.Root.new("chartdiv");

  const chart = root.container.children.push(am5xy.XYChart.new(root, {
    panX: false,
    panY: false,
    wheelX: "panX",
    wheelY: "zoomX"
  }));

  // Rest of chart code...

  return { root, chart };
}

You can write your unit tests in a chart.test.js file, like this:

// Import chart code
import { makeChart } from "./chart";

beforeEach(() => {
  // Create <div> which is needed by the chart
  document.body.innerHTML = `<div id="chartdiv"></div>`;
});

test("chart exists", () => {
  const { root, chart } = makeChart();

  // Test chart
  expect(root).toBeDefined();
  expect(chart).toBeDefined();
  expect(chart.get("wheelX")).toBe("panX");
});

Components that use our framework packages

To test components that use our framework packages without drawing their charts, mock the package. For React:

jest.mock("@amcharts/amcharts5-react", () => ({
  useAmChart: () => ({ ref: () => {}, root: undefined, result: undefined }),
  AmChart: () => null
}));

The packages are ES modules too: the transformIgnorePatterns above, which matches @amcharts, covers them.

Example

Open in StackBlitz.