stormy-gold

testing in tanstack-router

Is there any repo to have a look using Tanstack-Router & Tanstack-Query to see how can we test them? I haven't seen too much information, and there is no doc for this. It would be helpful to know how setup a testing environment for routes that use lazy loading, etc

7 Replies

absent-sapphire•2y ago

We don't really have a prescribed testing strategy for apps using TSR. A decent amount of it kind of relies on what your project is using. I've always liked integration testing with stuff like cypress, but I have no clue how stuff would work with unit testing 😕

sensitive-blue•2y ago

You can try adding a RouterProvider with a simple router setup that renders the component under test. I tried going down this path but I ran into the issue that the router loads components async. I was converting an existing app and this broke all the unit tests as they assume the component is rendered and available to do assertions on immediately. I ended up just mocking the entire @tanstack/react-router library instead.

jest.mock('@tanstack/react-router', () => ({
  useRouterState: jest.fn().mockReturnValue({}),
  useSearch: jest.fn().mockReturnValue({}),
  useParams: jest.fn().mockReturnValue({}),
  useLoaderData: jest.fn().mockReturnValue({}),
  useLoaderDeps: jest.fn().mockReturnValue({}),
  usesMatch: jest.fn().mockReturnValue({}),
  useNavigate: jest.fn().mockReturnValue((options: object) => null),
  getRouteApi: jest.fn().mockReturnValue({
    useSearch: jest.fn().mockReturnValue({}),
    useParams: jest.fn().mockReturnValue({}),
    useLoaderData: jest.fn().mockReturnValue({}),
    useLoaderDeps: jest.fn().mockReturnValue({}),
    useMatch: jest.fn().mockReturnValue({}),
  }),
  Link: ({ children, ...props }: ComponentProps<LinkComponent>) => {
    return (
      <a {...props}>
        {typeof children === 'function'
          ? children({ isActive: false })
          : children}
      </a>
    );
  },
  Outlet: () => {
    return null;
  },
}));

jest.mock('@tanstack/react-router', () => ({
  useRouterState: jest.fn().mockReturnValue({}),
  useSearch: jest.fn().mockReturnValue({}),
  useParams: jest.fn().mockReturnValue({}),
  useLoaderData: jest.fn().mockReturnValue({}),
  useLoaderDeps: jest.fn().mockReturnValue({}),
  usesMatch: jest.fn().mockReturnValue({}),
  useNavigate: jest.fn().mockReturnValue((options: object) => null),
  getRouteApi: jest.fn().mockReturnValue({
    useSearch: jest.fn().mockReturnValue({}),
    useParams: jest.fn().mockReturnValue({}),
    useLoaderData: jest.fn().mockReturnValue({}),
    useLoaderDeps: jest.fn().mockReturnValue({}),
    useMatch: jest.fn().mockReturnValue({}),
  }),
  Link: ({ children, ...props }: ComponentProps<LinkComponent>) => {
    return (
      <a {...props}>
        {typeof children === 'function'
          ? children({ isActive: false })
          : children}
      </a>
    );
  },
  Outlet: () => {
    return null;
  },
}));

That is what I am using as a global mock. Individual tests can use jest.mocked() to override the defaults to have actual values for things like useParams and useSearch.

stormy-goldOP•2y ago

Ive made it work. Using: vite, vitest, tanstack-react-router, tanstack-react-query, Zustand, react-testing-library. I'll upload a demo for the community but this weekend. I'm sick of coding for work haha, cheers

ambitious-aqua•2y ago

looking forward to it

unwilling-turquoise•2y ago

@El Barto any progress on this? Currently struggling through getting unit tests working with most of the same stack.

flat-fuchsia•2y ago

+1, having a lot of issues with it

extended-salmon•2y ago

"This Weekend" is now one Weekend in the past 😆 Would also like to have a look into it as i am currently trying to setup a unit test with bun / react-test-renderer

Gaming

Programming

testing in tanstack-router

Did you find this page helpful?