v7 Framework SPA : is testing impossible ?

[joccd]

Hi,

I work on a new SPA project and I want to use React Router v7 (framework).
The problem is I don't see how to test my app like I used to (vitest, testing library, msw, ...).
I read this page : Testing but there are 2 problems :

• It doesn't work if my component use type-safety, I have to use useLoaderData
• It doesn't test the loader/action func

Any Idea ?

Regards,

[sergiodxa]

I think the first one is a problem many people reported, the testing helper doesn’t support components using the component props

You could create a route component that calls useLoaderData and useActionData and pass that to your own component as a prop

The second issue, the createRoutesStub is to test React components in the context of React Router

To test loaders and actions you could just call them as normal functions, you will need to pass a Request instance, a params object and a context object

Although instead of testing the loaders and actions I recommend you to test the logic inside. If you move that to another functions you don’t need to simulate a request to test them.

[msatgh]

Could you provide an example on how to use createRoutesStub with a route component and a loader (mock)? I tried a lot, but in now way can get data from the loader into the component. loaderData is always undefined. The documentation of React Router v7 is very sparse, it shows only an example with an action, but there are many more properties going into createRoutesStub. For instance if i have no HydrateFallback defined i get an error,...