How to do component testing that use <Link /> component?

[albehrens]

I am doing component testing with Cypress and I am testing a component that include this router's <Link /> component. When running tests I get the following error:

TypeError: Cannot read properties of null (reading 'router')
at useRouterContext (http://localhost:5173/__cypress/src/node_modules/.vite/deps/@tanstack_react-router.js?v=8b1fb580:467:18)
at useLinkProps (http://localhost:5173/__cypress/src/node_modules/.vite/deps/@tanstack_react-router.js?v=8b1fb580:320:18)
at <unknown> (http://localhost:5173/__cypress/src/node_modules/.vite/deps/@tanstack_react-router.js?v=8b1fb580:413:21)
at renderWithHooks (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:12171:26)
at updateForwardRef (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:14327:28)
at beginWork (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:15934:22)
at HTMLUnknownElement.callCallback2 (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:3674:22)
at Object.invokeGuardedCallbackDev (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:3699:24)
at invokeGuardedCallback (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:3733:39)
at beginWork$1 (http://localhost:5173/__cypress/src/node_modules/.vite/deps/chunk-Z3FMXND3.js?v=8b1fb580:19761:15)

That makes a lot of sense to me, because the component is now not accessed through routes and therefore the <RouterProvider /> is not mounted.

How do I test components that use the <Link /> component? How can I mock the component or how can I mock useRouterContext()?

[bboulahdid]

Any thing on how we can test components that use the Link from @tanstack/react-router?
I tried to wrap it with ReactProvider with no success (it does not accept children prop).

[antonio-ivanovski]

This used to work for me, but somewhere along the versions it stopped working

export function TestRouter(props: React.PropsWithChildren) {
    const router = useMemo(
        () =>
            createRouter({
                routeTree: createRootRoute({
                    component: () => props.children,
                }),
            }),
        [props.children],
    );
    return <RouterProvider router={router} />;
}

[ghost]

Same problem here, I want to test one component, not the whole app, and I don't find how to wrap the component with the Router

[francisbonneau]

Would you mind sharing an example @ToTeTo ? Thank you!

[antonio-ivanovski]

Create a file with the TestRouter definition.

// testRouter.tsx
import { RouterProvider, createRootRoute, createRouter } from '@tanstack/react-router';
import { useMemo } from 'react';

/**
 * Test router provider for testing components that use the router.
 */
export function TestRouter(props: React.PropsWithChildren) {
    const router = useMemo(
        () =>
            createRouter({
                defaultComponent: () => props.children,
            }),
        [props.children],
    );
    return <RouterProvider router={router} />;
}

In tests that would include the router, use the TestRouter as wrapper component.

// sidebar.test.tsx
import { render } from '@testing-library/react';
import { TestRouter } from '../../__tests/testRouter';
import { Sidebar } from './Sidebar';

describe('Sidebar', () => {
    test('should render correctly', async () => {
        const res = render(
            <Sidebar
                items={[
                    { type: 'item', label: 'Item Label', to: 'item-label' },
                    {
                        type: 'group',
                        label: 'Group Label',
                        items: [{ type: 'item', label: 'Item Label 2', to: 'item-label-2' }],
                    },
                ]}
            />,
            { wrapper: TestRouter },
        );

        expect(await res.findByText('Item Label')).toBeVisible();
        expect(await res.findByText('Group Label')).toBeVisible();
        expect(await res.findByText('Item Label 2')).toBeVisible();
    });
});

Note: this approach is only to make the router display the content and the router components to be able to get the basic context of the router. Navigation, router context, router data... is not testable this way.

[edgar0011]

this results in:

The above error occurred in the <Transitioner> component:
    
        at Transitioner (/Users/martinweiser/Work/projects/accion/acl-splunk/node_modules/@tanstack/react-router/src/RouterProvider.tsx:98:18)
        at RouterProvider (/Users/martinweiser/Work/projects/accion/acl-splunk/node_modules/@tanstack/react-router/src/RouterProvider.tsx:62:5)
        at TestableRouterUI (/Users/martinweiser/Work/projects/accion/acl-splunk/src/components/router/Router.tsx:240:12)

@tanstack/[email protected]

[edgar0011]

what worked for me and

export const TestableRouterUI = (props: PropsWithChildren) => {
  const rootRoute = createRootRoute({
    component: () => props.children,
  })

  const router = useMemo(
    () => createRouterTanstack({
      routeTree: rootRoute.addChildren([
        new Route({
          path: '*',
          component: () => props.children,
          getParentRoute: () => rootRoute,
        }),
      ]),
    }),
    [props.children, rootRoute],
  )

  return <RouterProvider router={router} />
}

and the test, note the render in act()

describe('table row with Link', () => {
  it('renders TableRow with classes, and LInk', async () => {
    delete window.location
    window.location = {}
    window.location.href = 'localhost'

    expect(window.location.href).toEqual('localhost')

    const rendered = await act(
      () => render(<TestableRouterUI><TableRow className='anotherClass' {...props} /></TestableRouterUI>),
    )

    const elements = rendered?.container.querySelectorAll('.anotherClass')

    const element = elements[0] as HTMLElement

    expect(rendered?.container).toBeDefined()

    expect(elements?.length).toEqual(1)
    expect(element?.getAttribute('class')?.includes('anotherClass')).toEqual(true)
  })
})

[sisekipp]

I have the same problem. You have to use act().

await act(() => renderWithContext(HeaderNavigation));