TypeError: URL.createObjectURL is not a function | Antd charts

Question

I have an application written in TypeScript, where i now try to implement charts from antd. Everything works perfectly fine in localhost, but when i push it to github, one of the test fails:

FAIL src/App.test.tsx
  ● Test suite failed to run

    TypeError: URL.createObjectURL is not a function

    > 1 | import { Bar, Pie, Progress } from "@ant-design/plots";
        | ^
      2 |
      3 | interface Props {
      4 |   percent: number;

      at createWorker (node_modules/@antv/g2/src/geometry/label/util/createWorker.ts:48:27)
      at Object.<anonymous> (node_modules/@antv/g2/src/geometry/label/layout/hide-overlap.ts:37:28)
      at Object.<anonymous> (node_modules/@antv/g2/src/index.ts:91:1)
      at Object.<anonymous> (node_modules/@antv/g2plot/src/index.ts:4:1)
      at Object.<anonymous> (node_modules/@ant-design/plots/lib/components/area/index.js:41:16)
      at Object.<anonymous> (node_modules/@ant-design/plots/lib/index.js:21:30)
      at Object.<anonymous> (src/containers/Admin/AdminSingleEvent/Statistics/Charts.tsx:1:1)
      at Object.<anonymous> (src/containers/Admin/AdminSingleEvent/Statistics/EventStats.tsx:4:1)
      at Object.<anonymous> (src/containers/Admin/AdminSingleEvent/AdminSingleEventPage.tsx:12:1)
      at Object.<anonymous> (src/App.tsx:10:1)
      at Object.<anonymous> (src/App.test.tsx:2:1)

Have seen some similar problems in here, but none of the solutions have helped me so far.

I've been trying to configurate test files and jest files, with no success

The error occurs as long as i just import anything from @ant-design/plots, as in this code snippet:

import { Progress } from "@ant-design/plots";

interface Props {
  percent: number;
  color: string;
}

export const EventProgress: React.FC<Props> = ({ percent, color }) => {
  return <Progress height={10} autoFit percent={percent} color={[color, "#E8EDF3"]} style={{ borderRadius: "50%" }} />;
};

Answer 1

The underlying problem is this (thanks ChatGPT): "The error "TypeError: URL.createObjectURL is not a function" occurs when the URL.createObjectURL function is called but is not available in the environment.

This error might happen because you are trying to use "@ant-design/plots" in an environment where the DOM is not available, such as in a server-side rendering (SSR) setup like Next.js or in a Node.js environment. The URL.createObjectURL function is a part of the DOM API and is typically available only in a browser environment."

I fixed this by adding the following to my setupTests.ts file:

window.URL.createObjectURL = function () {
  return "";
};
if (typeof Worker === "undefined") {
  global.Worker = class {
    addEventListener() {}

    removeEventListener() {}

    dispatchEvent() {
      return false;
    }

    onmessage() {}

    onmessageerror() {}

    onerror() {}

    postMessage() {}

    terminate() {}
  };
}