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:
Login with Kody: (kody / kodylovesyou) then open it up again.
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

Access Denied

You must login or register for the workshop to view the diff.

Check out this video to see how the diff tab works.