使用第 3 部分 SVG 图表生成 Jest 快照 (Nivo)

Question

我正在尝试为使用 Nivo 图表库生成图表（特别是 ResponsivePie 图表）的图表组件编写单元测试。当我尝试渲染组件的快照时，我得到的只是周围的 Div 元素，其中没有任何内容。

我尝试过，

• getBBox
• 添加一个引用，
• 在组件周围添加一个具有高度和宽度的 div
• 模拟引用

我的测试文件

import React from "react";
import "i18n_test";
import { render, cleanup } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import DonutChart from "./DonutChart";

afterEach(() => {
  jest.clearAllMocks();
  cleanup();
});


const data = [
  {
    id: "make",
    label: "make",
    value: 68,
  },
  {
    id: "elixir",
    label: "elixir",
    value: 580,
  },
  {
    id: "stylus",
    label: "stylus",
    value: 286,
  },
  {
    id: "python",
    label: "python",
    value: 26,
  },
  {
    id: "scala",
    label: "scala",
    value: 151,
  },
];
const seed = 0;
const total = 4;
const showGrey = false;

const onClick = jest.fn();

describe("DonutChart Component", () => {
  it("Snapshot render", async () => {
    const useMockRef = React.createRef(null);
    const { container } = render(
      <div style={{ width: "200px", height: "200px" }} ref={useMockRef}>
        <DonutChart
          data={data}
          seed={seed}
          total={total}
          showGrey={showGrey}
          onClick={onClick}
        />
      </div>
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});

我生成的快照

exports[`DonutChart Component Snapshot render 1`] = `
<div
  style="width: 100%; height: 100%;"
>
  <div
    class="has-other"
    style="width: 100%; height: 100%;"
  >
    <div
      style="width: 100%; height: 100%;"
    />
  </div>
</div>
`;