I am using jest and testing-library/react to write unit testing. Before this, I have never written any unit testing. After writing the test I am getting an error something like this.

 FAIL  src/__test__/ponents/Barchart.test.tsx
  ● Test suite failed to run

    Call retries were exceeded

      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)

node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

I have no idea why I am getting this. This is the ponent I am trying to test.

import { useState } from "react";
import Chart from "react-apexcharts";

const ChartComponent = (props: any) => {
  const [series, setSeries] = useState([
    {
      name: "Net Profit",
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
    },
    {
      name: "Revenue",
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
    },
  ]);
  const [optionsRadial, setOptionRadial] = useState({
    chart: {
      type: "bar",
      height: 350,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        borderRadius: 4,
        radius: 10,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: [
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
      ],
    },
    yaxis: {
      title: {
        text: "$ (thousands)",
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function (val: any) {
          return "$ " + val + " thousands";
        },
      },
    },
  });
  return (
    <Chart data-testid="chart"  options={optionsRadial} series={series} type="bar" height="186" />
  );
};

export default ChartComponent;

Barchart.test.tsx

import React from "react";
import ApexCharts from "apexcharts";
import ReactApexChart from "react-apexcharts";
import { render, screen } from "@testing-library/react";
import ChartComponent from "../../ponents/BarChart/index";


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

  it("ChartComponent render without crashing", async() => {
    const { container } = render(<ChartComponent />);
   
    const chart = container.querySelector('#chart');
    expect(chart).toBeInTheDocument();
   
  
  });

  it('ChartComponent Debug', () => {
    render(<ChartComponent />);
    screen.debug();
  })
});

Any help would be great.

I am using jest and testing-library/react to write unit testing. Before this, I have never written any unit testing. After writing the test I am getting an error something like this.

 FAIL  src/__test__/ponents/Barchart.test.tsx
  ● Test suite failed to run

    Call retries were exceeded

      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)

node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

I have no idea why I am getting this. This is the ponent I am trying to test.

import { useState } from "react";
import Chart from "react-apexcharts";

const ChartComponent = (props: any) => {
  const [series, setSeries] = useState([
    {
      name: "Net Profit",
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
    },
    {
      name: "Revenue",
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
    },
  ]);
  const [optionsRadial, setOptionRadial] = useState({
    chart: {
      type: "bar",
      height: 350,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        borderRadius: 4,
        radius: 10,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: [
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
      ],
    },
    yaxis: {
      title: {
        text: "$ (thousands)",
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function (val: any) {
          return "$ " + val + " thousands";
        },
      },
    },
  });
  return (
    <Chart data-testid="chart"  options={optionsRadial} series={series} type="bar" height="186" />
  );
};

export default ChartComponent;

Barchart.test.tsx

import React from "react";
import ApexCharts from "apexcharts";
import ReactApexChart from "react-apexcharts";
import { render, screen } from "@testing-library/react";
import ChartComponent from "../../ponents/BarChart/index";


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

  it("ChartComponent render without crashing", async() => {
    const { container } = render(<ChartComponent />);
   
    const chart = container.querySelector('#chart');
    expect(chart).toBeInTheDocument();
   
  
  });

  it('ChartComponent Debug', () => {
    render(<ChartComponent />);
    screen.debug();
  })
});

Any help would be great.

• javascript
• reactjs
• jestjs
• react-testing-library
• apexcharts

• If you're mocking react-apexcharts in the test, what exactly are you trying to test? You'll want to use the actual react-apexcharts and check if the expected element get rendered. – juliomalves Commented Apr 24, 2021 at 16:12

1 Answer 1

For anybody who is looking for mocks to suppress this warning.

Object.defineProperty(window, 'ResizeObserver', {
  writable: true,
  value:
   window.ResizeObserver 
   || jest.fn().mockImplementation(() => ({
        observe: jest.fn(),
        unobserve: jest.fn(),
        disconnect: jest.fn()
   }))
});

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: () => {},
  }),
});

https://github./apexcharts/react-apexcharts/issues/52#issuement-844757362