Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

Testing TanStack Router + Query apps in the real browser

DEV Community·Kevin Julián Martínez Escobar·20 days ago
#Sp28lNPu
#testing#tanstack#react#test#fullscreen#real
Reading 0:00
15s threshold

The first time you try to test a TanStack app the way the React Testing Library docs suggest, the test file gets bigger than the component. You spin up a memory router, instantiate a new QueryClient per test, wrap everything in QueryClientProvider and RouterProvider , set up MSW handlers for every request the loader fires, and finally write three lines of actual assertion. The component renders against jsdom. Close to the real thing, but not it. It works. It's also where a lot of people give up on testing TanStack apps and go straight to Playwright. There's a middle ground: run the test inside the real app , against the real router, the real query client, the real component tree, and get the result back as plain text. That's what TWD does, and TanStack happens to be a particularly good fit, because everything TanStack provides is already wired up by the time your test runs.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More