createRemixStub: provide a way to modify requests

[kentcdodds]

Sometimes, I want to test full routes with createRemixStub (this would apply to testing react-router apps as well btw). When I do, it looks something like this:

test('The user profile when logged in as self', async () => {
	const user = await insertNewUser()

	const App = createRemixStub([
		{
			id: 'root',
			path: '/',
			loader: rootLoader,
			children: [
				{
					path: '/users/:username',
					element: <UsernameRoute />,
					// @ts-expect-error https://github.com/remix-run/remix/issues/7082
					loader,
				},
			],
		},
	])

	const routeUrl = `/users/${user.username}`
	render(<App initialEntries={[routeUrl]} />)

	await screen.findByRole('heading', { level: 1, name: user.name })
	await screen.findByRole('button', { name: /logout/i })
	await screen.findByRole('link', { name: /my notes/i })
	await screen.findByRole('link', { name: /edit profile/i })
	// do other things
})

This test allows me to easily get coverage on the loaders as well as the UI they power.

However, often the loaders need to access state (like cookies) from the request to determine whether the user is logged in. But we have no way to set those headers on the request.

Unfortunately no, setting document.cookie does not work (not even in a real browser):

document.cookie = 'some=cookie'
const request = new Request('/')
request.headers.get('cookie') // null

I'm not sure what can be done about this issue. Perhaps another configuration option? Just an idea:

const App = createRemixStub([
	{
		id: 'root',
		path: '/',
		requestInit: (defaultRequestInit) => ({
			...defaultRequestInit,
			headers: {
				'cookie': 'my=cookie',
			}
		}),
		loader: rootLoader,
		children: [
			{
				path: '/users/:username',
				element: <UsernameRoute />,
				// @ts-expect-error https://github.com/remix-run/remix/issues/7082
				loader,
			},
		],
	},
])

[kentcdodds]

Oh, I just realized something... I can do this!

const cookieHeader = await getSessionCookieHeader(user)

const App = createRemixStub([
	{
		id: 'root',
		path: '/',
		loader: async args => {
			// add the cookie header to the request
			args.request.headers.set('cookie', cookieHeader)
			return rootLoader(args)
		},
		children: [
			{
				path: '/users/:username',
				element: <UsernameRoute />,
				loader: async args => {
					// add the cookie header to the request
					args.request.headers.set('cookie', cookieHeader)
					// @ts-expect-error https://github.com/remix-run/remix/issues/7082
					return loader(args)
				},
			},
		],
	},
])

This works fine. Way better than my other idea. Maybe I'm tired. Please ignore 😅

[sergiodxa]

Another option could be that instead of initial entries being an array of string, it could be an array of requests.

[gafemoyano]

Oh my god, thank you Kent for figuring this out! I was losing my mind trying to find an easy way to get good coverage on my unit tests (client requirement) and this did the trick!

Kinda wish it was easier to get a coverage report with Playwright but messing with babel config seemed too much of a hassle with Remix.

[lennerd]

I really like @sergiodxa idea of initial list of requests!