TypeError: r.node.getBBox 不是函数”。] { code: 'ERR_UNHANDLED_REJECTION' }

Question

我正在使用jest和testing-library/react编写单元测试。在此之前，我从未编写过任何单元测试。编写测试后，我收到类似这样的错误。

\n

 FAIL  src/__test__/components/Barchart.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    Call retries were exceeded\n\n      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)\n\nnode:internal/process/promises:245\n          triggerUncaughtException(err, true /* fromPromise */);\n          ^\n\n[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".] {\n  code: 'ERR_UNHANDLED_REJECTION'\n}\nnode:internal/process/promises:245\n          triggerUncaughtException(err, true /* fromPromise */);\n          ^\n\n[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".] {\n  code: 'ERR_UNHANDLED_REJECTION'\n}\nnode:internal/process/promises:245\n          triggerUncaughtException(err, true /* fromPromise */);\n          ^\n\n[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".] {\n  code: 'ERR_UNHANDLED_REJECTION'\n}\n

\n

我不知道为什么我会得到这个。这是我正在尝试测试的组件。

\n

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

\n

\n

条形图.test.tsx

\n

\n

import React from "react";\nimport ApexCharts from "apexcharts";\nimport ReactApexChart from "react-apexcharts";\nimport { render, screen } from "@testing-library/react";\nimport ChartComponent from "../../components/BarChart/index";\n\n\ndescribe("<ChartComponent/>", () => {\n  jest.mock("react-apexcharts", () =>\n    jest.fn(() => {\n      return null;\n    })\n  );\n  jest.mock("apexcharts", () => ({\n    exec: jest.fn(() => {\n      return new Promise((resolve, reject) => {\n        resolve("uri");\n      });\n    }),\n  }));\n\n  it("ChartComponent render without crashing", async() => {\n    const { container } = render(<ChartComponent />);\n   \n    const chart = container.querySelector('#chart');\n    expect(chart).toBeInTheDocument();\n   \n  \n  });\n\n  it('ChartComponent Debug', () => {\n    render(<ChartComponent />);\n    screen.debug();\n  })\n});\n\n

\n

任何帮助都会很棒。

\n

Answer 1

对于任何正在寻找模拟来抑制此警告的人。

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.com/apexcharts/react-apexcharts/issues/52#issuecomment-844757362