I have a module inside my component.tsx that renders a tanstack table.
I have a file storing mu columns and what they render, and one of the columns, control if I can show an expanded row or not in my table, if yes, I call a function from my component.tsx:

const showExpandedRow = () => {         
return <p>test</>         
    }

I have a test making sure it’s rendering the table and everything in it’s place, which works, but vitest says that it’s missing the test for showExpandedRow.

If I mock the table to render it inside my test, it works, but breaks the first test and vice-versa.

I’ve tried

vi.doMock("@/components/ui/data-table", () => {
          return {
                DataTable: ({
                    columns,
                    data,
                    getRowCanExpand,
                    renderExpandedRow,
                }: { [key: string]: any }) => (
                    <>
                        {!!renderExpandedRow &&
                            renderExpandedRow()}
                    </>
                ),
            };
});

don’t work.

and I’ve tried:

vi.mock("@/components/ui/data-table", () => {  
return {
                DataTable: ({
                    columns,
                    data,
                    getRowCanExpand,
                    renderExpandedRow,
                }: { [key: string]: any }) => (
                    <>
                        {!!renderExpandedRow &&
                            renderExpandedRow()}
                    </>
                ),
            };
 });

it works but breaks the first one. Do I need two separate files?

File structure:

 -mainFolder
  -tests
    -component.test.tsx
  -component.tsx
  -columns.tsx

logic: logic inside columns => logic inside table => logic inside component.tsx(that renders the table) and stores showExpandedRow function