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.2.17"
},
"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-)"
  ]
}

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