Generating a Jest snapshot with 3rd part SVG charts (Nivo)

Question

I am trying to write unit tests for a chart component that uses the Nivo charting library to generate the chart, specifically the ResponsivePie chart. When I try to render the component for a snapshot all I get is the surrounding Div element with nothing in it.

I have tried,

• getBBox
• adding a ref
• adding a div with height and width around the component
• mocking up the ref

My test file

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();
  });
});

My resulting snapshot

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>
`;