Как Jest / модульное тестирование компонента Reliant на TableRefs

Question

У меня есть таблица, которой дано downloadRequested, она будет использовать предоставленный tableRef и вернет sortedData внутри таблицы. При попытке добавить модульные тесты, чтобы убедиться, что <CSVLink> отображается на downloadRequested = true, я продолжаю нажимать на следующую ошибку: TypeError: Cannot read property 'getResolvedState' of null

Должен ли я издеваться над ссылкой? или мне нужно как-то это предоставить? Как мне обойти эту проблему?

Код:

import React, { useRef } from "react";
import { CSVLink } from "react-csv";

function MyTable(props) {
  const tableRef = useRef(null);

  const getColumns = () => {
    return [{ Header: "Name", accessor: "name" }, { Header: "Id", accessor: "id" }];
  };

  const getCsvData = () => {
    const keys = ["name", "id"];

    return tableRef.current.getResolvedState().sortedData.map(row => getCsvDataFromTable(keys, row));
  };

  return (
    <>
      {props.downloadRequested && (
        <CSVLink data={getCsvData()} target="_blank" filename={`myTable.csv`} data-testid="csvLink">
          <div
            data-testid="csvLinkDiv"
            ref={e => {
              if (e) {
                e.click();
              }
            }}
          />
        </CSVLink>
      )}
      <Table columns={getColumns(props)} filterable forwardedRef={tableRef} {...props} />
    </>
  );
}

export default MyTable;

Набор тестов:

import React from "react";
import { render } from "@testing-library/react";

import MyTable from "./MyTable";

describe("MyTable", () => {
  const sampleData = [{ id: "123", name: "John Doe" }, { id: "456", name: "Doe John" }];

  it("Should render MyTable with CSV Link correctly", () => {

    const { queryByTestId } = render(<MyTable data={sampleData} downloadRequested={true} />);
    expect(queryByTestId("csvLink")).toBeTruthy();
  });
});

Answer 1

Ну, я понял это. Моя проблема проистекает из того факта, что CSV-Link необходимо иметь данные во время выполнения, и то, как это настроено, не может быть получено позднее. В любом случае, происходит то, что getCsvData () вызывался до инициализации таблицы, поэтому ссылка всегда была нулевой. Одна из работ, которую я использовал, заключалась в том, чтобы сначала отобразить его с помощью downloadRequested = false, а затем перерисовать (теперь таблица существует) со значением true.