Integration testing with Testing Library in Remix - Mini Project: Build & Apply

Integration testing with Testing Library in Remix

📖 Scenario: You are building a simple Remix app that shows a list of tasks and allows users to add new tasks. You want to write an integration test to check that the tasks render correctly and that adding a new task updates the list.

🎯 Goal: Write an integration test using Testing Library that renders the TaskList component, verifies the initial tasks are shown, simulates adding a new task, and confirms the new task appears in the list.

📋 What You'll Learn

Create a mock list of tasks as initial data

Set up a test render with Testing Library's render function

Use Testing Library queries to check tasks in the document

Simulate user input and button click to add a new task

Verify the new task is displayed after adding

💡 Why This Matters

🌍 Real World

Integration tests help ensure that different parts of your Remix app work together correctly, catching bugs before users see them.

💼 Career

Writing integration tests is a key skill for frontend developers to maintain reliable and user-friendly web applications.

1

DATA SETUP: Create initial tasks array

Create a constant array called initialTasks with these exact string values: 'Buy groceries', 'Walk the dog', and 'Read a book'.

Remix

# Your code here

Hint

Use const initialTasks = ['Buy groceries', 'Walk the dog', 'Read a book'];

2

CONFIGURATION: Import render and userEvent from Testing Library

Add these import statements exactly: import { render, screen } from '@testing-library/react'; and import userEvent from '@testing-library/user-event';.

Remix

const initialTasks = ['Buy groceries', 'Walk the dog', 'Read a book'];

// Your code here

Hint

Use import { render, screen } from '@testing-library/react'; and import userEvent from '@testing-library/user-event';

3

CORE LOGIC: Render TaskList and check initial tasks

Write a test function called test('renders initial tasks and adds a new task', async () => { ... }). Inside it, render the TaskList component with initialTasks as a prop. Then use screen.getByText to check that 'Buy groceries' is in the document.

Remix

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

const initialTasks = ['Buy groceries', 'Walk the dog', 'Read a book'];

// Your code here

Hint

Use render(<TaskList tasks={initialTasks} />); and expect(screen.getByText('Buy groceries')).toBeInTheDocument();

4

COMPLETION: Simulate adding a new task and verify it appears

Inside the same test function, use userEvent.type to type 'Clean the house' into the input with placeholder 'New task'. Then use userEvent.click on the button with text 'Add'. Finally, check that 'Clean the house' is now in the document using screen.getByText.

Remix

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

const initialTasks = ['Buy groceries', 'Walk the dog', 'Read a book'];

test('renders initial tasks and adds a new task', async () => {
  render();
  expect(screen.getByText('Buy groceries')).toBeInTheDocument();
  // Your code here
});

Hint

Use await userEvent.type(screen.getByPlaceholderText('New task'), 'Clean the house'); and await userEvent.click(screen.getByText('Add')); then check with expect(screen.getByText('Clean the house')).toBeInTheDocument();