Next.js 15 Fullstack Web Apps · Lección

Pruebas unitarias y de integración

Escriba pruebas unitarias y de integración eficaces para componentes de React y funciones de Next.js mediante Jest y React Testing Library.

Pruebas unitarias y de integración es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Why We Test Our Code

Welcome! In modern web development, especially with complex applications built with Next.js, ensuring your code works as expected is crucial. This is where testing comes in.

Reliability: Tests prevent bugs and regressions.
Maintainability: Well-tested code is easier to refactor and update.
Confidence: You can deploy new features with greater assurance.

We'll focus on Unit Tests (small, isolated parts) and Integration Tests (how parts work together).

Setting Up Jest & RTL

Jest is a popular JavaScript testing framework, and React Testing Library (RTL) is a set of utilities for testing React components. Together, they form a powerful duo for Next.js apps.

First, install the necessary packages:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Your First Unit Test (Function)

A unit test checks a small, isolated piece of code, like a single function. Let's create a simple utility function and then write a test for it.

Here's our utility:

// utils/math.js
function add(a, b) {
  return a + b;
}

// This block makes the file directly runnable via Node.js
if (typeof require !== 'undefined' && require.main === module) {
  console.log("Running add(5, 3):", add(5, 3)); // Expected: 8
  console.log("Running add(10, -2):", add(10, -2)); // Expected: 8
}

Testing the 'add' Function

Now, let's write a test for our add function. Jest uses describe to group tests and test (or it) for individual test cases. expect is used for assertions.

Save this in utils/math.test.js:

// utils/math.test.js
import { add } from './math';

describe('add function', () => {
  test('should correctly add two positive numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('should handle negative numbers', () => {
    expect(add(5, -3)).toBe(2);
  });
});

// To run tests: npx jest

Introducing React Testing Library

React Testing Library (RTL) encourages testing components in a way that mimics how users interact with them. Instead of checking internal state, you query the DOM for elements a user would see or interact with.

render: Mounts a React component into a virtual DOM.
screen: Provides methods to query the rendered DOM (e.g., getByText, getByRole).
@testing-library/jest-dom: Adds custom matchers like toBeInTheDocument.

Testing a Simple React Component

Let's test a basic button component. We'll ensure it renders with the correct text.

First, the component (components/Button.jsx):

// components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

Testing Component Rendering

Now, the test for our Button component. We use render to put it on the screen and screen.getByText to find it, then toBeInTheDocument to confirm its presence.

Save this as components/Button.test.jsx:

// components/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

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

Simulating User Interactions

Beyond just rendering, we need to test how components respond to user actions. RTL's fireEvent (or userEvent for more realistic interactions) helps simulate clicks, input changes, etc.

We can check if a function passed via props is called.

// components/Button.test.jsx (continued)
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component interactions', () => {
  test('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest mock function
    render(<Button label="Click Me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integration: Testing Route Handlers

Next.js Route Handlers (API routes in the App Router) are server-side functions. We can test them by directly importing and calling their HTTP methods (like GET, POST) and mocking Next.js's request/response objects.

Here's an example:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' }, { status: 200 });
}

// app/api/hello/route.test.js
import { GET } from './route';

describe('GET /api/hello', () => {
  test('should return a greeting message with status 200', async () => {
    // No need to mock NextRequest/NextResponse directly for simple cases
    // as NextResponse.json returns a standard Response object.
    const response = await GET();
    const json = await response.json();

    expect(response.status).toBe(200);
    expect(json.message).toBe('Hello from API!');
  });
});

Best Practices for Effective Tests

To write useful and maintainable tests:

Test user behavior: Focus on what the user sees and does, not internal component state.
Keep tests focused: Each test should ideally check one thing.
Make tests fast: Slow tests discourage running them often.
Readability: Write clear tests that are easy to understand.
Mock dependencies: Use jest.mock() or jest.fn() to isolate units and prevent external factors from affecting tests.

Quick Check

Which of the following statements about testing in Next.js with Jest and React Testing Library is TRUE?

Recap: Unit & Integration Testing

Great job! You've learned the fundamentals of unit and integration testing in Next.js:

Jest is your testing framework.
React Testing Library helps test components like a user would.
Unit tests verify small, isolated code units.
Integration tests check how different parts (like components and APIs) work together.
You can test functions, React components, and Next.js Route Handlers.
Best practices include focusing on user behavior and mocking dependencies.

Next up, we'll explore End-to-End testing for full application flows!

Preguntas frecuentes

¿La lección «Pruebas unitarias y de integración» es gratis?

Sí — el texto completo de «Pruebas unitarias y de integración» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

¿Qué aprenderé en «Pruebas unitarias y de integración»?

Escriba pruebas unitarias y de integración eficaces para componentes de React y funciones de Next.js mediante Jest y React Testing Library. Practicas Next.js 15 Fullstack Web Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Next.js 15 Fullstack Web Apps?

No se requiere experiencia previa. Next.js 15 Fullstack Web Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Pruebas unitarias y de integración»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack Web Apps?

Sí. Cada lección de Next.js 15 Fullstack Web Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Pruebas unitarias y de integración
Pruebas de extremo a extremo con Playwright
Monorepos y microfrontends
Mocking y pruebas de componentes del servidor

← Volver a Next.js 15 Fullstack Web Apps