Hi guys, Was trying to create test code for the amchart, using jest but faced some issue.

[brijesh-imemori]

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

return { root, chart };
}

import { makeChart } from "layouts/dashboards/imemori/ProjectedAndOpps/ProjectRev/amcharttesting";

beforeEach(() => {
// Create

which is needed by the chart
const div = document.createElement("div");
div.id = "chartdiv";
document.body.appendChild(div);
});
test("chart exists", () => {
const { root, chart } = makeChart();
(url)
// Test chart
expect(root).toBeDefined();
expect(chart).toBeDefined();
expect(chart.get("wheelX")).toBe("panX");
});

Error:

I have been working on the test code for AmCharts, and I've encountered an issue. Despite trying various solutions, I haven't been able to find a resolution for this particular problem, So guys please help me out to resolve this issue.

[martynasma]

Have you reviewed our Jest tutorial?
https://www.amcharts.com/docs/v5/getting-started/integrations/jest/

[brijesh-imemori]

Hi @martynasma apologies for the late reply, regarding the issue, yeah I have done the same thing that you guys mentioned in the documentation.

babel.config.js:

jest.config.js:

package.json (devDependencies):

package.json (dependencies):

as you can see in the above images, please let me know what else I need to do, to complete my test code for the component.

[Pauan]

Are you sure that you have canvas setup properly? Were there any warnings or errors when you installed canvas?

Also, you need to remove the chartdiv element, otherwise it'll create duplicates:

afterEach(() => {
    document.body.removeChild(document.getElementById("chartdiv"));
});

[brijesh-imemori]

Hi @Pauan sorry for the late reply, yeah I am using it correctly, but can you show me for example how you have created the test code for the amCharts? That will be great help.

[Pauan]

The afterEach is based on your code which you provided earlier.

Our docs show how to set up everything correctly (including the tests), and we have a working example.

[github-actions]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

[stanley985]

@brijesh-imemori did your issue resolved? I've met the same issue as you.

[brijesh-imemori]

Hi @stanley985 ,
https://stackblitz.com/edit/node-mm8hqa?file=src%2FApp.js This will help you with what to do.

and also create jest.config.js

module.exports = {
// Jest configuration options go here
verbose: true,
collectCoverage: true,
moduleDirectories: ["node_modules", "src"],
// to ignore amChart
transformIgnorePatterns: ["/node_modules/(?!@amcharts|d3-|d3-array|internmap)"],
testEnvironment: "jsdom",
moduleNameMapper: {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"/src/mocks/fileMock.js",
"\.(css|less)$": "/src/mocks/styleMock.js",
},
// ...other options
setupFilesAfterEnv: ["/src/jest-setup.ts"],
};

and add the above code to that. also, we have made some changes in package.json

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test -- --config=jest.config.js --collectCoverage",
"clear_jest": "jest --clearCache",
"eject": "react-scripts eject"
},

just look into it if this helps.

[stanley985]

Hi @stanley985 , https://stackblitz.com/edit/node-mm8hqa?file=src%2FApp.js This will help you with what to do.

and also create jest.config.js

module.exports = { // Jest configuration options go here verbose: true, collectCoverage: true, moduleDirectories: ["node_modules", "src"], // to ignore amChart transformIgnorePatterns: ["/node_modules/(?!@amcharts|d3-|d3-array|internmap)"], testEnvironment: "jsdom", moduleNameMapper: { ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/src/mocks/fileMock.js", ".(css|less)$": "/src/mocks/styleMock.js", }, // ...other options setupFilesAfterEnv: ["/src/jest-setup.ts"], };

and add the above code to that. also, we have made some changes in package.json

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test -- --config=jest.config.js --collectCoverage", "clear_jest": "jest --clearCache", "eject": "react-scripts eject" },

just look into it if this helps.

I will have a look and test if this work for me. whether success or not I will inform you. thanks a lot for this.

[stanley985]

Hi @stanley985 , https://stackblitz.com/edit/node-mm8hqa?file=src%2FApp.js This will help you with what to do.
and also create jest.config.js
module.exports = { // Jest configuration options go here verbose: true, collectCoverage: true, moduleDirectories: ["node_modules", "src"], // to ignore amChart transformIgnorePatterns: ["/node_modules/(?!@amcharts|d3-|d3-array|internmap)"], testEnvironment: "jsdom", moduleNameMapper: { ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/src/mocks/fileMock.js", ".(css|less)$": "/src/mocks/styleMock.js", }, // ...other options setupFilesAfterEnv: ["/src/jest-setup.ts"], };
and add the above code to that. also, we have made some changes in package.json
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test -- --config=jest.config.js --collectCoverage", "clear_jest": "jest --clearCache", "eject": "react-scripts eject" },
just look into it if this helps.

I will have a look and test if this work for me. whether success or not I will inform you. thanks a lot for this.

Does your package.json config same as officer doc? I used Angular not React

[brijesh-imemori]

We are using React ts, it worked for us.
Don't know how to implement it in angular.