How to Jest/Unit Test a Component Reliant on TableRefs - reactjs

Question

I have a table which given the downloadRequested it will use the tableRef provided and return the sortedData within the table. When trying to add unit tests to make sure that the <CSVLink> is rendered on downloadRequested = true I keep hitting the below error:
TypeError: Cannot read property 'getResolvedState' of null
Am I supposed to mock the ref? or do I need to somehow provide it? How do I get around this issue?
Code:
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;
Test Suite:
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

Well, I figured this out. My problem stems from the fact that the CSV-Link needs to have data at run time, and the way this is set up it doesnt get that till later. Anyways, what was happening is that getCsvData() was being called before the table was initialized, hence the ref was always null. One work around I used was to render it with downloadRequested = false first, then rerender it (now a table exists) with the value true.