Metodología TDD: red, green y refactor

Contenido del curso

Fundamentos del Testing en React

Estrategias de Testing en React

Testing de Flujos de Usuario en React

Testing de Hooks en React

Pruebas de Integración y APIs en React

Reflexiones sobre Testing en React

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:40

Metodología TDD: red, green y refactor

Curso de React Testing Library

Clase 6 de 20

Clase 6 / 20

Recursos

El Test Driven Development (TDD) invierte el orden tradicional del desarrollo: primero escribes los tests y después construyes el componente. Esta metodología te permite refactorizar con seguridad, reducir bugs y ahorrarte dolores de cabeza cuando tu software ya es robusto y los casos de uso están claros.

Cómo funciona el ciclo red, green y refactor en TDD

El corazón de TDD es un ciclo de tres fases que guía cada componente que escribes.

Red: escribes el test antes de que exista el componente. Como no hay código todavía, el test falla. Ese fallo es la señal de que vas por buen camino [00:30].
Green: creas el componente mínimo necesario para que el test pase. Aquí el objetivo no es que sea bonito, sino que funcione.
Refactor: limpias y mejoras el código con la red de seguridad que te dan los tests. Si rompes algo, el test te avisa de inmediato.

¿Cuándo conviene usar TDD? Cuando ya tienes un software robusto y conoces los casos de uso. Si estás en fase experimental, los casos de prueba cambiarán constantemente y la metodología pierde sentido [01:25].

Cómo escribir el primer test antes de crear el componente

Imagina que vas a construir un contador en React. Antes de tocar el componente, creas la carpeta Contador y dentro un archivo contador.test.tsx. Ese archivo es tu punto de entrada al rojo del ciclo [02:00].

Dentro del test importas describe, it y expect desde vitest, y render, screen y fireEvent desde testing library react. Defines una suite para el componente Contador y validas dos casos de uso muy concretos:

Que al renderizarse muestre el valor inicial en cero.
Que al hacer clic en un botón llamado Incrementar, el contador suba a uno.

Cómo se ve un caso de prueba real

En el primer test renderizas el componente (que aún no existe), buscas el texto Contador: 0 con screen.getByText y haces la aserción con el matcher toBeInTheDocument.

En el segundo test simulas el clic. Usas fireEvent.click dentro de un act asíncrono sobre el botón Incrementar y verificas que ahora aparezca Contador: 1 en pantalla [04:10].

En este punto los tests están rotos, y eso está bien. Es la fase red funcionando como debe.

Cómo construir el componente para pasar a la fase verde

Ahora sí creas contador.tsx. Defines un estado con useState inicializado en cero, retornas un div con el texto Contador: seguido del valor del estado, y agregas un botón con el texto Incrementar [05:30].

tsx import { useState } from 'react';

export const Contador = () => { const [contador, setContador] = useState(0);

return ( <div> <p>Contador: {contador}</p> <button onClick={() => setContador(contador + 1)}> Incrementar </button> </div> ); };

Un detalle importante: el texto en el componente debe coincidir exactamente con el que pones en el test. Si tu test busca Contador: con dos puntos, tu JSX debe escribirlo igual. De lo contrario, getByText no lo encuentra.

Guardas, importas el componente en el archivo de test y los tests pasan. Llegaste al green.

¿Por qué el test falla si el texto no coincide exactamente? Porque getByText hace una comparación literal del contenido. Un espacio o un signo de puntuación distinto rompe la búsqueda.

Por qué el refactor es la fase más poderosa de TDD

Aquí viene lo interesante. Tienes el componente funcionando, pero no te gusta dejar la actualización de estado directamente en el onClick. Decides extraerla a una función llamada handleIncrementar [07:00].

tsx const handleIncrementar = () => { setContador(contador + 1); };

<button onClick={handleIncrementar}>Incrementar</button>

Guardas y los tests siguen pasando. Esa es la magia: puedes mejorar la estructura del código sin miedo a romper la funcionalidad, porque los tests actúan como un guardián. Si llegaras a hacer un refactor incorrecto, el test te lo grita al instante.

¿Qué protege exactamente TDD durante un refactor? Protege el comportamiento esperado del componente. Si cambias la implementación pero mantienes el mismo resultado visible, los tests pasan. Si rompes el comportamiento, fallan.

Reto para practicar TDD con un componente nuevo

Al lado del contador, crea otro componente aplicando la misma metodología. Algunas ideas:

Una to-do list donde al agregar elementos aparezcan en una lista.
Un temporizador que muestre el tiempo al iniciar y la palabra pausa al pausar.
Cualquier componente con casos de uso claros que puedas describir antes de escribir el código.

La clave está en empezar por el test. Define qué debe hacer el componente, escribe los casos de prueba, mira cómo fallan, construye lo mínimo para que pasen y refactoriza con tranquilidad. Comparte lo que hagas en la sección de aportes.

Ulqernesh Karvenae

Hace un mes•editado

Reto interesante


import { describe, it, expect, vi, afterEach } from "vitest";

import { act, render, screen } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

import { Timer } from "./Timer";

describe("<Timer />", () => {
  afterEach(() => {
    vi.useRealTimers();
  });

  it("should show Start when hovered", async () => {
    const user = userEvent.setup();

    render(<Timer />);

    const timer = screen.getByRole("timer", { name: /timer/i });
    await user.hover(timer);

    expect(timer).toHaveTextContent("Start");
  });

  it("should display a valid time format", async () => {
    const user = userEvent.setup();

    render(<Timer />);

    const timer = screen.getByRole("timer");
    await user.click(timer);

    expect(timer).toHaveTextContent(/^\d{2}:\d{2}$/);
  });

  it("should decrement every second", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");

    await user.click(timer);

    await act(async () => {
      await vi.advanceTimersByTimeAsync(1000);
    });

    expect(timer).toHaveTextContent("00:59");
  });

  it("should stop when clicked again", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");
    await user.click(timer);
    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:59");

    await user.click(timer);
    await vi.advanceTimersByTimeAsync(3000);

    expect(timer).toHaveTextContent("00:59");
  });

  it("should show Continue when paused and hovered", async () => {
    const user = userEvent.setup();

    render(<Timer />);

    const timer = screen.getByRole("timer");

    await user.click(timer);
    await user.click(timer);
    await user.unhover(timer);
    await user.hover(timer);

    expect(timer).toHaveTextContent(/continue/i);
  });

  it("should continue when clicked after being paused", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");
    await user.click(timer);
    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:59");

    await user.click(timer);
    await vi.advanceTimersByTimeAsync(3000);

    expect(timer).toHaveTextContent("00:59");

    await user.click(timer);
    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:58");
  });

  it("should restart when clicked again", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");
    await user.click(timer);
    await vi.advanceTimersByTimeAsync(60000);

    expect(timer).toHaveTextContent("00:00");

    await user.click(timer);

    expect(timer).toHaveTextContent("01:00");

    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:59");
  });
});

import { describe, it, expect, vi, afterEach } from "vitest";

import { act, render, screen } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

import { Timer } from "./Timer";

describe("<Timer />", () => {
  afterEach(() => {
    vi.useRealTimers();
  });

  it("should show Start when hovered", async () => {
    const user = userEvent.setup();

    render(<Timer />);

    const timer = screen.getByRole("timer", { name: /timer/i });
    await user.hover(timer);

    expect(timer).toHaveTextContent("Start");
  });

  it("should display a valid time format", async () => {
    const user = userEvent.setup();

    render(<Timer />);

    const timer = screen.getByRole("timer");
    await user.click(timer);

    expect(timer).toHaveTextContent(/^\d{2}:\d{2}$/);
  });

  it("should decrement every second", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");

    await user.click(timer);

    await act(async () => {
      await vi.advanceTimersByTimeAsync(1000);
    });

    expect(timer).toHaveTextContent("00:59");
  });

  it("should stop when clicked again", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");
    await user.click(timer);
    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:59");

    await user.click(timer);
    await vi.advanceTimersByTimeAsync(3000);

    expect(timer).toHaveTextContent("00:59");
  });

  it("should show Continue when paused and hovered", async () => {
    const user = userEvent.setup();

    render(<Timer />);

    const timer = screen.getByRole("timer");

    await user.click(timer);
    await user.click(timer);
    await user.unhover(timer);
    await user.hover(timer);

    expect(timer).toHaveTextContent(/continue/i);
  });

  it("should continue when clicked after being paused", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");
    await user.click(timer);
    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:59");

    await user.click(timer);
    await vi.advanceTimersByTimeAsync(3000);

    expect(timer).toHaveTextContent("00:59");

    await user.click(timer);
    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:58");
  });

  it("should restart when clicked again", async () => {
    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });

    const user = userEvent.setup({
      advanceTimers: vi.advanceTimersByTime,
    });

    render(<Timer time={60} />);

    const timer = screen.getByRole("timer");
    await user.click(timer);
    await vi.advanceTimersByTimeAsync(60000);

    expect(timer).toHaveTextContent("00:00");

    await user.click(timer);

    expect(timer).toHaveTextContent("01:00");

    await vi.advanceTimersByTimeAsync(1000);

    expect(timer).toHaveTextContent("00:59");
  });
});

Fundamentos del Testing en React

Por qué el testing salva tu app en producción

Testing de Aplicaciones con Vitest y React

Estructura y Creación de Tests en JavaScript con Vitest

Estrategias de Testing en React

Pruebas de Componentes en React con Testing Library

Table-driven testing con it.each en React

Metodología TDD: red, green y refactor

Uso de Mocks en Testing de Software

Testing de Flujos de Usuario en React

Pruebas de Error en Login con React y Vitest

Pruebas de Login Exitoso en Aplicación Web

Mockear getOrders y probar el dashboard

Testing componentes para superadmins con getByTestId

Testing de Hooks en React

Principios SOLID para código limpio y mantenible en desarrollo software

Testeo de Custom Hooks con Testing Library React Hooks

Cómo vi.spyOn detecta errores reales

Pruebas de Integración y APIs en React

Configura Mock Service Worker en tu proyecto

Pruebas de React con Mock Service Worker y Hooks

Pruebas de Error 500 en Endpoints con Mock Service Worker

Reflexiones sobre Testing en React

IA para generar tests en React con ChatGPT

Cobertura de Código: Tipos y Configuración en Vitest

Cuándo no escribir tests en React

Metodología TDD: red, green y refactor

Progreso del curso

Fundamentos del Testing en React

Estrategias de Testing en React

Testing de Flujos de Usuario en React

Testing de Hooks en React

Pruebas de Integración y APIs en React

Reflexiones sobre Testing en React

Recursos

Recursos