Do you think having unit tests in the usage examples would be useful?

[ananta-dev]

Tansktack Router is brilliant, but it is not obvious how to create unit tests for the routing functionality of an app built upon it. Perhaps having some examples of unit tests in the examples would be helpful to developers who are starting to use the library.

[SeanCassiere]

Nothing currently stops you from doing unit testing using memory history (createMemoryHistory).

The problems start when you try to test components (instead of the actual pages) that use parts of TanStack Router.

This is because the Router does a lot of runtime validation and as such you need to have it actually booted-up and running. Since all the hooks consumed by TanStack Router are built upon useMatch, which requires your real route-tree to be consumed, you aren't able to mock it to test components.

But, again, this doesn't prevent you from doing so. It just means that you aren't able to test components in a traditional sense, you need to consider it from page point-of-view.

All that said, we're happy to accept PRs of good examples. If you've got a good example of testing apps using TSR, pull up a PR, community contributions are welcome.


IMHO: Given that TSR exclusively resides in the frontend-ui space, to take a look at integration testing with a tool like Cypress.

[ananta-dev]

It may make sense to write Cypress tests as you are suggesting instead of unit tests. I probably should have included Cypress/integration tests in the poll question as an option.

Indeed, nothing stops us from doing unit testing using memory history or perhaps Cypress tests. However, as the poll votes seem to suggest, it is not obvious how to do it, and people would like to see examples.

In a recent job interview task I used Tanstack Router among a range of other libraries. I was required to write tests and I was able to write tests to cover all of my app's functionality, except for Tanstack Router. I just could not figure it out, and it is not for lack of experience. I write both Jest and Cypress tests regularly at my job as a frontend dev.

[SeanCassiere]

In terms of Cypress tests, it should be the same as writing those for react-router-dom.

As for unit testing, it is dependent on your setup and the types of tests you are running. If your tests rely on certain functionality of the Router, then you need to do the necessary configuration to bring the router to that state for perform the navigations your desire.

For example, our unit test on the <Link> component spins up the necessary routes required for successful navigation since the router does runtime validation.

[mer10z]

I think it would be helpful to have some good solutions for unit testing because it's not easy. My current approach is creating test routes with test RouterProvider for every single unit test, but it has a few problems:

1. It's very slow. Rendering a unit test component inside of a RouterProvider with vitest+RTL adds an additional half a second compared to just rendering the same component without the RouterProvider. For me that adds up to an extra 13 minutes of test time.
2. There is no way to verify dynamic links are constructed correctly. For example, if you want to test a link to a specific route.id with dynamic search params, you'd have to somehow construct a route tree with your source and destination route to get the link to generate correctly.

It seems like there should be a better way to unit test routes but I haven't been able to come up with anything. Maybe loading the entire application route tree in each test and adding an additional test route to that would solve issue 2 that I mentioned.

I currently use playwright e2e tests to verify some of the router logic, but that's hitting a real server. It's much slower and less reliable than unit tests so I would prefer to do as much router coverage as possible with unit tests.