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,...

[andwrobs]

Thanks for the summary @sergiodxa

I'm a giant fan and advocate of React Router v7 internally at my job.

IMO testing route components, loaders, and actions is the least polished part of v7 currently. There's no contributor-blessed examples or public documentation for anything beyond 101s. e.g. having a component with props in this section of the docs https://reactrouter.com/start/framework/testing -- 100% of users who opt in to recommended type safety features will face this problem

I currently just plop in some //@ts-expect-error's and call it a day, but it's something I have to constantly hand-wave over to teammates. "It's on their radar, I'm sure they'll iron out the rough edges eventually". See other thread too: #12730 (reply in thread)

It's so close to being the ultimate SPA framework, hope the testing story gets the attention it deserves eventually 🙏

[brophdawg11]

Oops! Support for the props in createRoutesStub was an oversight on our part - adding support for that here: #13528