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

Test unitari dei componenti

Scriva test unitari efficaci per i componenti React usando librerie di testing come React Testing Library e Jest.

Lezione 1 di 410 passaggi

Test unitari dei componenti è una lezione Next.js 15 Fullstack (App Router + Server Actions) gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack (App Router + Server Actions), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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?

Rispondi nella lezione interattiva

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!

Gratis per iniziare

Impara TypeScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 22
Lezioni: 88

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Test unitari dei componenti» è gratuita?

Sì — il testo completo di «Test unitari dei componenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack (App Router + Server Actions), passa a CoddyKit PRO. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.

Cosa imparerò in «Test unitari dei componenti»?

Scriva test unitari efficaci per i componenti React usando librerie di testing come React Testing Library e Jest. Eserciti Next.js 15 Fullstack (App Router + Server Actions) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Next.js 15 Fullstack (App Router + Server Actions)?

Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack (App Router + Server Actions) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Test unitari dei componenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack (App Router + Server Actions)?

Sì. Ogni lezione Next.js 15 Fullstack (App Router + Server Actions) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Next.js 15 Fullstack (App Router + Server Actions)