Bun + React test renderer + Tanstack Router
Hey there.
Is anyone here who has successfully setup a bun unit test for a React component which uses a tanstack router hook?
As the RouterProvider does not take any children im not able to use this Provider.
I'm kind of stuck.
Help would be appreciated
Thanks 🍻
4 Replies
ambitious-aqua•2y ago
There is a whole tree to consider here.
1. All consumers of any of the Router's hooks need to be rendered by the RouterProvider.
2. The RouterProvider, takes in the
router instance returned by the createRouter function.
3. The createRouter function takes in the routeTree, which contains on the routes for the application.
You can try, creating a dummy routeTree and injecting it into the createRouter function, but is quite likely you'll have an error thrown at you if your hooks rely on the underlying routes themselves.
Unlike, other routing solutions, TSR requires this level of integration to get the type-safety and overall propagation throughout an app.
If you are injecting your real route-tree, you could use the memory history and set the initialEntries field to the desired route.sunny-greenOP•2y ago
Ok, thanks much for the information.
Im a bit confused how the WrapperComponent (for the test) should look like when the RouterProvider does not take any children.
So, assuming i make a "WrapperComponent" for dependency stuff like the router, the bottom should theoretically work?:
function MyWrappedComponent() {
return (
<>
<RouterProvider router={myConfiguredRouter} />
<MyComponentWhichUsesARouterHook foo="bar" />
</>
)
}ambitious-aqua•2y ago
So, like I mentioned, you won't be able to test it the way you normally test components, because you'll need the router to boot-up, and you'll need to make sure your component is being rendered within a route.
You'd need to set up your component and mount it as a route, then that route would have to be the element in the initialEntries field in the memory history.
Why are you trying to test the router anyways?
Since the router is so interconnected, and requires all this effort just to boot-up in a test environment, wouldn't it just be easier to test the components themselves.
If a click event triggers a navigate, wouldn't make more sense to accept that action as prop? and then test it by checking if a function has been called?
sunny-greenOP•2y ago
Do we speak about the same things? 😇
I'm not testing the router specifically.
Assuming i have a component like this:
const Sidebar = ({ children }: SidebarProps) => {
const routerState = useRouterState()
return (
<>
<some divs>My Info which is shown by the component</some divs>
<something>{routerState.location.pathname}</something>
</>
)
}
This example doesnt make any sense at all but should show the problem.
I want to test the component and need to mount it via "react-test-renderer" package to expect via happy-dom package if the dom contains my string "My Info which is shown by the component".
But as you already stated, mounting the components needs a full configured router, what is basically no problem to setup when there is no other way. But my entry question was, if there is something out there to have a look into 😊
Thanks and sorry for my stupid questions
Now i have seen your other answer here:
https://discord.com/channels/719702312431386674/1217250887655886848/1224990831044460626
and i will try some things out