Testing Tanstack Start
I haven't seen anything about how to test Tanstack Start components, so I figured I'd write a post about what worked for me.
14 comments · 89% upvoted · source · other discussions
comments
EskiMojo14thefirst
Suspicious_Dance4212
I don't understand this testing strategy. Test pure functions / units with vitest but the majority of your UI testing should be done in a network mocked browser environment such as a playwright / cypress, simulating the real user experience as they navigate through your application. Don't mock useQuery, mock the network response. Don't mock router hooks, spin up the app so the hooks can pull from the parent context because it's actually running. It requires less mocking, it's closer to the user experience and you have higher confidence. Pushing mocks to the edge of your application, i.e. at the network level, means the behaviour you are testing is closer to the real thing.
thasmin [OP]
This is the kind of feedback I was going to get. Thanks.
I haven't set up playwright on this project yet. It takes longer to set up and run and I'd rather spend the time on features at the moment. This is a side project and I'm trying to get it to the point where it makes some money and is worth investing into.
Suspicious_Dance4212
You've made a good choice going with tanstack tools in my opinion. Tanstack router seems very promising, I've yet to try Start.
Suspicious_Dance4212
Ah right, sorry I didn't realise you wrote the blog post! I did this sort of testing in the past. I learnt from another engineer about playwright integration testing and wouldn't go back.
yksvaan
Alternatively just don't test components, test logic, services etc. If components are simple and straightforward in data/event flow testing them is not great benefit vs effort.
thasmin [OP]
I'm hoping that someone tells me I'm doing it all wrong and has a better way to do it.
Cahnis
WolfFiveFive
toto1384
I should always add that I got a react error that was fixed by only using the tanstack vite plugin when not using vitest:
```
plugins: [
// this is the plugin that enables path aliases
viteTsConfigPaths({
projects: ['./tsconfig.json'],
}),
tailwindcss(),
...(process.env.VITEST ? [] : [tanstackStart({ customViteReactPlugin: true, }),]), // 🧠 disable for tests
viteReact(),
],
```
the lack of official testing tools is definitely my main gripe with TSS/R as it stands, everything else is really lovely to use
TheScapeQuest 5 points · Sep 2025
100%. And it is regularly ignored. The only options available are community driven verbose helpers, often with limited utility.
The solution proposed here isn't good enough, it would force you to use the direct TSR imports of
useParams/useLoaderDataetc with thefromargument. It would be impossible to usegetRouteApior import theRoutedirectly.But this feels like a lot of JS tooling in general these days, testing is becoming a massive mess of mocks, context providers and type casting. It's chaos.