Unit testing loaders and actions in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library needed for Remix loader tests.

Remix

import { [1] } from '@remix-run/node';

Drag options to blanks, or click blank then click option'

Arender

BLink

CuseLoaderData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'render' instead of 'json'.

Using 'useLoaderData' which is a React hook, not a loader utility.

The 'json' function from '@remix-run/node' is used to create JSON responses in loaders and actions.

2fill in blank

medium

Complete the code to mock a request object for testing a loader.

Remix

const request = new Request('[1]');

Drag options to blanks, or click blank then click option'

Afetch

B/api/data

Cwindow

Ddocument

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'fetch' or 'window' which are not valid URL strings.

Using 'document' which is unrelated to Request URLs.

The Request constructor takes a URL string to simulate a request to that path.

3fill in blank

hard

Fix the error in calling the loader function with the correct arguments.

Remix

const response = await loader({ request: [1] });

Drag options to blanks, or click blank then click option'

Arequest

Burl

Cevent

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'url' instead of the Request object.

Using 'event' or 'context' which are not expected keys.

The loader function expects an object with a 'request' property containing the Request object.

4fill in blank

hard

Fill both blanks to extract JSON data from the loader response.

Remix

const data = await response.[1]();
console.log(data.[2]);

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cmessage

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() which returns raw text, not parsed JSON.

Accessing a wrong property like 'message' instead of 'result'.

Use response.json() to parse JSON data, then access the 'result' property from the data object.

5fill in blank

hard

Fill all three blanks to test an action function that returns a redirect response.

Remix

import { [1] } from '@remix-run/node';

const response = await action({ request: [2] });
expect(response.status).toBe([3]);

Drag options to blanks, or click blank then click option'

Aredirect

Brequest

C302

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'json' instead of 'redirect'.

Passing something other than the Request object as 'request'.

Expecting status 200 instead of 302 for redirects.

Import 'redirect' to create redirect responses, pass the Request object as 'request', and expect status 302 for redirects.