Unit testing loaders and actions in Remix - Mini Project: Build & Apply

Unit Testing Loaders and Actions in Remix

📖 Scenario: You are building a simple Remix app that manages a list of books. You want to ensure your data loading and form submission logic works correctly by writing unit tests for your loader and action functions.

🎯 Goal: Write unit tests for a Remix loader that fetches book data and an action that adds a new book. You will create test data, configure test helpers, write the core test logic, and complete the test setup.

📋 What You'll Learn

Create a test data array called books with two book objects

Add a configuration variable newBook representing a book to add

Write a test for the loader function that returns the books array

Write a test for the action function that adds newBook to books

💡 Why This Matters

🌍 Real World

Unit testing loaders and actions helps catch bugs early in Remix apps that fetch or modify data, improving app reliability.

💼 Career

Knowing how to write unit tests for Remix loaders and actions is valuable for frontend developers working with Remix to ensure code quality and maintainability.

1

Create test data array books

Create an array called books with two objects: { id: 1, title: '1984' } and { id: 2, title: 'Brave New World' }.

Remix

// Create the books array with two book objects
// Your code here

Hint

Use const books = [ ... ] with two objects inside.

2

Add configuration variable newBook

Add a constant called newBook with the object { id: 3, title: 'Fahrenheit 451' }.

Remix

const books = [
  { id: 1, title: '1984' },
  { id: 2, title: 'Brave New World' }
];

// Add newBook object here
// Your code here

Hint

Define newBook as a constant with the given object.

3

Write test for loader function

Write a test function called testLoader that returns the books array.

Remix

const books = [
  { id: 1, title: '1984' },
  { id: 2, title: 'Brave New World' }
];

const newBook = { id: 3, title: 'Fahrenheit 451' };

// Write testLoader function here
// Your code here

Hint

Create a function named testLoader that returns the books array.

4

Write test for action function

Write a function called testAction that adds newBook to the books array and returns the updated array.

Remix

const books = [
  { id: 1, title: '1984' },
  { id: 2, title: 'Brave New World' }
];

const newBook = { id: 3, title: 'Fahrenheit 451' };

function testLoader() {
  return books;
}

// Write testAction function here
// Your code here

Hint

Create a function named testAction that adds newBook to books and returns the updated array.