Remix Stub
π¨βπΌ Our user profile page has some logic for what to display depending on who's
looking at it. If you're looking at your own page, it shows a button for logout
and edit profile. If you're looking at someone else's page, it shows a button to
view their notes.
Go ahead and try with Kody's account:
We want to test that out, but the problem is those components rely on
useLoaderData, so we need to mock that out.So we're going to render our username route, but we also need to provide a
loader so the useLoaderData hook has something to return. And we can do
something to make it match the type of the real loader. Here's an example of how
to do that:import { json } from '@remix-run/node'
import { createRemixStub } from '@remix-run/testing'
import { render, screen } from '@testing-library/react'
import { default as RouteComponent, type loader } from './some-route'
// ...
const App = createRemixStub([
{
path: '/some-path',
Component: RouteComponent,
loader(): Awaited<ReturnType<typeof loader>> {
return json({
// we have to return the right types or TypeScript will be upset!
})
},
},
])
render(<App initialEntries={['/some-path']} />)
// ...
That can help us make sure that our fake version of a loader matches up with the
real one.
π§ββοΈ I already started this test, but rendering the
<UsernameRoute /> component
doesn't work since we use useLoaderData in it which requires a remix stub. So
you're going to need to do that part.π¨βπΌ That should be enough to get you going!
npx vitest username