Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Unit Testing Components

Write effective unit tests for your React components using testing libraries like React Testing Library and Jest.

Unit Testing Components is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro to Unit Testing

Welcome to unit testing for React components! Unit testing helps ensure that the smallest, independent parts of your code — your components — work exactly as intended.

What is a unit test? It's a test for a 'unit' of code, often a single function or component.
Why test components? To catch bugs early, prevent regressions, and ensure your UI behaves predictably.
We'll focus on isolating components and testing their specific functionality.

Jest: The Test Runner

Jest is a popular JavaScript testing framework developed by Facebook. It's often used with React because it's fast, feature-rich, and includes everything you need for testing.

Test Runner: Executes your tests and reports results.
Assertion Library: Provides functions like expect to check if values meet certain conditions.
Mocking Library: Helps isolate code by replacing dependencies with 'mock' versions.

React Testing Library (RTL)

While Jest runs the tests, React Testing Library (RTL) helps you test React components in a way that mimics how users interact with them.

User-centric: RTL encourages testing actual user behavior, not internal implementation details.
Accessibility: Its querying methods (like getByRole) promote good accessibility practices.
It provides utilities to render components, query the DOM, and simulate user events.

Setting Up Your Test Environment

Next.js projects often come with Jest and RTL already configured or easily added. Here's what you'll typically use:

jest: The core test runner.
@testing-library/react: The main library for testing React components.
@testing-library/jest-dom: Provides custom Jest matchers for better DOM assertions (e.g., .toBeInTheDocument()).

These libraries work together to create a powerful testing setup.

Our First Component to Test

Let's create a simple MyButton component. It will display some text and execute a function when clicked. This is a common pattern for interactive UI elements.

We'll save this as components/MyButton.js:

import React from 'react';

function MyButton({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

export default MyButton;

Basic Test Structure & Render

Test files typically live alongside the component (e.g., components/MyButton.test.js). We use describe to group related tests and test (or it) for individual test cases.

First, let's just render our button and ensure it appears. We'll use render from RTL.

import { render, screen } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('renders with the correct text', () => {
    render(<MyButton text="Click Me" onClick={() => {}} />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
  });
});

Querying Elements with RTL

RTL provides various 'query' methods to find elements in the rendered component. It's best to use queries that resemble how a user would find elements, prioritizing accessibility.

getByRole: Finds elements by their ARIA role (e.g., 'button', 'heading'). Highly recommended!
getByText: Finds elements containing specific text.
getByLabelText: Finds elements associated with a label.

We used getByText in the previous example, which is great for text content.

Simulating Interaction & Assertions

Now, let's test if our button's onClick handler is called when clicked. We use fireEvent from RTL to simulate user events and jest.fn() to create a 'mock' function.

jest.fn() lets us track if the function was called, how many times, and with what arguments. .toHaveBeenCalledTimes() is a jest-dom matcher.

import { render, screen, fireEvent } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('calls onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Create a mock function
    render(<MyButton text="Submit" onClick={handleClick} />);
    
    const buttonElement = screen.getByRole('button', { name: /Submit/i });
    fireEvent.click(buttonElement); // Simulate a click
    
    expect(handleClick).toHaveBeenCalledTimes(1); // Assert it was called once
  });
});

Quick Check on Testing

You have a component called Greeting that displays 'Hello, [name]!'.

// components/Greeting.js

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;

Which test snippet correctly asserts that 'Hello, Alice!' is rendered?

Recap: Unit Testing Components

Great job! You've taken your first steps into unit testing React components using Jest and React Testing Library.

Jest is your test runner and assertion framework.
React Testing Library helps you test components from a user's perspective.
You learned to render components, query for elements, simulate user interactions, and make assertions about component behavior.

Keep practicing to build robust and reliable Next.js applications!

Frequently asked questions

Is the “Unit Testing Components” lesson free?

Yes — the full text of “Unit Testing Components” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.

What will I learn in “Unit Testing Components”?

Write effective unit tests for your React components using testing libraries like React Testing Library and Jest. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?

No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Unit Testing Components” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?

Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Next.js 15 Fullstack (App Router + Server Actions)