Testing tanstack/react-router 0.0.1-beta.83

[monocle]

Spent the morning figuring this out. Not sure if this is the best way to get testing to work. This is using Vitest.

1. Create a helper function to create a testing router:

export function createTestRouter(component: () => JSX.Element) {
  const rootRoute = new RootRoute({
    component: Outlet,
  });

  const componentRoute = new Route({
    getParentRoute: () => rootRoute,
    path: "/",
    component,
  });

  const router = new Router({
    routeTree: rootRoute.addChildren([componentRoute]),
    history: createMemoryHistory(),
  });

  return router;
}

2. Here is the render helper function:

const _router = createTestRouter(() => <></>);

export function renderComponent(router: typeof _router) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
    /* eslint-disable */
    logger: {
      log: console.log,
      warn: console.warn,
      error: () => {},
    },
    /* eslint-enable */
  });

  return render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}

3. Here is the test setup. I had to create the router outside of the test context:

const router = createTestRouter(Landing);

test("renders Landing component", async () => {
  renderComponent(router);
  await waitFor(() =>
    expect(screen.queryByText(/landing/i)).toBeInTheDocument()
  );
});

Had to use waitFor with the memory history. However, when I used the createHashHistory that didn't seem to be necessary.

If there is a better way to do this, please let me know.

(Might be helpful for #583)

[R35007]

Hi @monocle,

This is really great. Thanks for sharing the code :).
By using this I can test any react component but I can't able to test a custom hook or redux sagas and stores. Is there any way to do it?
Can you please help me on this?

[flipmotion]

Hi @R35007,

In general you can create more complex renderComponent function. Here is example:

const _router = createTestRouter(() => <></>, {});
...
function renderRoute(router: typeof _router, store?: Record<string, unknown>) {
    return render(
        <QueryClientProvider client={queryClient}>
             <RouterProvider router={router} />
        </QueryClientProvider>,
        {
            wrapper: ({ children }) => {
                if (store) {
                    const reduxStore = createStore(rootReducer(), store);
                    return <Provider store={reduxStore}>{children}</Provider>;
                }

                return children;
            },
        }
    );
}

[Shuunen]

Thanks a lot @monocle , works great <3

The only thing is that these 3 classes are marked as deprecated :

I used the suggested methods from TanStack and here is my code in the end :

// utils.tsx

import { Outlet, RouterProvider, createMemoryHistory, createRootRoute, createRoute, createRouter } from '@tanstack/react-router';
import { render } from '@testing-library/react';

function createTestRouter(component: () => JSX.Element) {
  const rootRoute = createRootRoute({
    component: Outlet,
  });

  const componentRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/',
    component,
  });

  const router = createRouter({
    routeTree: rootRoute.addChildren([componentRoute]),
    history: createMemoryHistory(),
  });

  return router;
}

export function renderWithContext(component: () => JSX.Element) {
  const router = createTestRouter(component);
  return render(<RouterProvider router={router} />);
}

// my-test.test.tsx

import '@testing-library/jest-dom';
import { screen, waitFor } from '@testing-library/react';
import { expect, test } from 'vitest';
import { MyComponent } from './my-component.tsx';
import { renderWithContext } from './utils';

test('MyComponent render correctly', async () => {
  renderWithContext(MyComponent);
  expect(screen).toBeDefined();
  await waitFor(() => expect(screen.getByRole('heading')).toBeInTheDocument());
  expect(screen.getByRole('heading')).toHaveTextContent('My title');
});

[fernandortec]

I copied your code, but when I look at what's actually been rendered it renders only a div inside the body, here's the code:

const navLink = () => <NavLink to="/about">about</NavLink>; const link = renderWithContext(navLink); link.debug();

And here's the debug output:

[vespertilian]

@fernandortec, are you using waitFor to find your element? I noticed the same error until I used waitFor.

[andreymaklakov]

before update to 1.36 version was working good, but after update type error appear

<RouterProvider router={router} />

Type 'Router<Route<any, "/", "/", string, "__root__", {}, {}, {}, {}, {}, {}, {}, RouteContext, RouteContext, RouteContext, {}, {}, {},
readonly [...]>, TrailingSlashOption, Record<...>, Record<...>>' is not assignable to type 'Router<Route<any, "/", "/", string,
"__root__", {}, {}, {}, {}, {}, {}, {}, RouteContext, RouteContext, RouteContext, {}, {}, {}, { ...; }>, NonNullable<...>, Record<...>,
Record<...>>'.
The types of '__store.state' are incompatible between these types.
Type 'RouterState<Route<any, "/", "/", string, "__root__", {}, {}, {}, {}, {}, {}, {}, RouteContext,
 RouteContext, RouteContext, {}, {}, {}, readonly [...]>, MakeRouteMatch<...>>' is not assignable to type 'RouterState<Route<any, "/", "/", string, "__root__", {}, {}, {}, {}, {}, {}, {}, 
RouteContext, RouteContext, RouteContext, {}, {}, {}, { ...; }>, MakeRouteMatch<...>>'.ts(2322)

RouterProvider.d.ts(37, 5): The expected type comes from property 'router' which is declared here on type 
'IntrinsicAttributes & Omit<RouterOptions<Route<any, "/", "/", string, "__root__", {}, {}, {}, {}, {}, {}, {},
 RouteContext, RouteContext, ... 4 more ..., { ...; }>, NonNullable<...>, Record<...>, Record<...>>, "context"> & { ...; }'

[favna]

@andreymaklakov I'm facing the same issue, but functionally it still works so for now I annotated the lines with a @ts-expect-error comment.