Unit testing loaders and actions in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this loader return?

Given this Remix loader function, what will be the JSON response when called?

Remix

import { json } from '@remix-run/node';

export async function loader() {
  return json({ message: 'Hello from loader', count: 3 });
}

A {"message":"Hello from loader","count":3}

B {"msg":"Hello from loader","count":3}

C {"message":"Hello from loader","count":"3"}

D {"message":"Hello from loader"}

💡 Hint

Look carefully at the keys and value types in the returned JSON.

The loader returns a JSON response with keys exactly as defined: 'message' and 'count' with count as a number 3.

❓ state_output

intermediate

What is the action's returned status code?

Consider this Remix action function. What HTTP status code will the response have?

Remix

import { json } from '@remix-run/node';

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  if (!name) {
    return json({ error: 'Name required' }, { status: 400 });
  }
  return json({ success: true });
}

A 200

B 400

C 500

D 404

💡 Hint

Check the condition for returning status 400 carefully.

If 'name' is missing, status 400 is returned. Otherwise, the default status 200 is used.

🔧 Debug

advanced

Why does this loader test fail?

This test for a Remix loader fails. What is the cause?

Remix

import { loader } from './route';

test('loader returns correct message', async () => {
  const response = await loader();
  const data = await response.json();
  expect(data.message).toBe('Hello from loader');
});

A response.json() is not a function on the returned object

B loader() is missing await keyword

C The test expects wrong message string

D loader() returns a Response object, but test treats it as plain object

💡 Hint

Think about what loader() returns and how to extract JSON from it.

Remix loaders return a Response object. To get JSON, you must call response.json() which returns a promise.

📝 Syntax

advanced

Which action code snippet correctly handles form data?

Select the code snippet that correctly extracts 'email' from form data in a Remix action.

A const email = request.formData().get('email');

B const email = await request.getFormData('email');

C const formData = await request.formData(); const email = formData.get('email');

D const formData = request.formData(); const email = formData.email;

💡 Hint

Remember that formData() returns a promise and you must await it.

request.formData() returns a promise, so you must await it before calling get(). Option C does this correctly.

🧠 Conceptual

expert

What is the best way to unit test a Remix loader that depends on session data?

You have a Remix loader that reads user info from a session cookie. Which approach correctly isolates the loader for unit testing?

A Call the loader with a real request object and real session cookie from a test browser

B Mock the session retrieval function and pass a fake request with cookie header to the loader

C Skip testing the loader and only test the UI components that use its data

D Modify the loader to not use session and instead pass user info as a parameter

💡 Hint

Think about how to isolate external dependencies in unit tests.

Unit tests should isolate external dependencies. Mocking session retrieval and passing a fake request allows testing loader logic without real sessions.