TypeError: clone.node.getBBox is not a function

Hi, I have a console warning I was hoping someone could help me with. When using apex charts heatmap I get a long callstack console warning. I’m doing a smoke test on the component with jest to make sure it renders properly. I also tested for the example code for React heatmap on the apex charts webpages and I get same warning.

console.warn node_modules/apexcharts/dist/apexcharts.common.js:14260 TypeError: clone.node.getBBox is not a function at new create (path\node_modules\apexcharts\dist\apexcharts.common.js:21109:30)

And then the callstack continues a bit before another warning:

console.warn node_modules/apexcharts/dist/apexcharts.common.js:14260 TypeError: this.node.getScreenCTM is not a function at create.screenCTM (path\node_modules\apexcharts\dist\apexcharts.common.js:21342:41)

And the callstack continues again.

Anyone have an idea of what might be the problem?

[karesztrk]

For anybody who is looking for mocks to suppress this warning. You can also add jest-canvas-mock if you need a proper implementation behind the scenes.

Object.defineProperty(global.SVGElement.prototype, 'getScreenCTM', {
  writable: true,
  value: jest.fn(),
});

Object.defineProperty(global.SVGElement.prototype, 'getBBox', {
  writable: true,
  value: jest.fn().mockReturnValue({
    x: 0,
    y: 0,
  }),
});

Object.defineProperty(global.SVGElement.prototype, 'getComputedTextLength', {
  writable: true,
  value: jest.fn().mockReturnValue(0),
});

Object.defineProperty(global.SVGElement.prototype, 'createSVGMatrix', {
  writable: true,
  value: jest.fn().mockReturnValue({
    x: 10,
    y: 10,
    inverse: () => {},
    multiply: () => {},
  }),
});

[junedchhipa]

Other users have fixed this error by mocking ApexCharts in their tests

import ApexCharts from "apexcharts";
import ReactApexChart from "react-apexcharts";`

jest.mock("react-apexcharts", () =>
  jest.fn(() => {
    return null;
  })
);
jest.mock("apexcharts", () => ({
  exec: jest.fn(() => {
    return new Promise((resolve, reject) => {
      resolve("uri");
    });
  })
}));

https://github.com/apexcharts/ng-apexcharts/issues/48#issuecomment-667124436 https://github.com/apexcharts/react-apexcharts/issues/197#issuecomment-660125576