Testeo de Custom Hooks con Testing Library React Hooks

Clase 13 de 20 • Curso de React Testing Library

Resumen

Comando para instalar la dependencia de desarrollo para hacer test de custom Hooks

yarn add -D @testing-library/react-hooks

Luis Fernando Valladares Castro

student•

A partir de React Testing Library v13 ya no es necesario instalar la liberia @testing-library/react-hooks. Ahora es tan simple como:

import { renderHook, waitFor } from "@testing-library/react";

Como podran notar tambien importe el waitFor pues el mismo comportamiento de waitForNextUpdate (no disponible) se puede simular con esta funcionalidad. El ejercicio de la clase quedaria de la siguiente manera:

Wilmer Garzon Cabezas

Team Platzi•

¡Excelente aporte técnico Luis! 👏

Efectivamente, la migración a renderHook y waitFor desde @testing-library/react representa una mejora significativa en la API. Esta consolidación no solo reduce dependencias sino que también alinea mejor con los principios de Testing Library.

Gracias por mantener al día a la comunidad con las mejores prácticas actuales. 🚀

toma tu medalla 🥇💚

Matthew Seidel Morcillo

student•

asimismo, se puede hacer de la siguiente manera.

const {result, rerender} = renderHook(() => useOrders()) ...

act``(() => rerender());

expect(result.``current``.loading).toBe(false); expect(result.``current``.orders).toEqual(mockOrders); expect(result.``current``.error).toBeNull();

haciendo esto se obtiene el mismo resultado

Andres Gallego

student•

Esta es mi solucion al reto del eror.

César Arango

student•

Otra alternativa por si les resulta un error con el waitForNextUpdate():

TypeError: waitForNextUpdate is not a function ❯ src/hooks/useOrders.test.ts:57:15 55| 56| // Wait for the hook to update after fetching orders 57| await waitForNextUpdate(); | ^ 58| 59| // Ensure the loading state is false and orders are loaded

Erick Martinez

student•

De hecho no debería mostrar ese error, y realmente lo que pasa (y es algo que me pasó), es importar "renderHook" de "@testing-library/react-hooks" y no de "@testing-library/react"

Wilmer Garzon Cabezas

Team Platzi•

¡Excelentes observaciones!

Para clarificar: desde RTL v13+, el enfoque recomendado es:

import { renderHook, waitFor } from '@testing-library/react';

// Nuevo approach
const { result } = renderHook(() => useOrders());
await waitFor(() => {
  expect(result.current.orders).toBeDefined();
});
```El error `waitForNextUpdate is not a function` típicamente ocurre por mezclar APIs antiguas con nuevas. La migración completa a `@testing-library/react` es la solución más limpia y alineada con las mejores prácticas actuales.

Gracias a ambos por contribuir a la claridad técnica de este tema. 🚀

Cesar González Caballero

student•

desde react 18 no se usa el waitfor Next ni se instala la libreria de react-hook, evitar este paso y solo usar con las importaciones de import { renderHook, waitFor } from "@testing-library/react"; usando sus correspondientes:

const { result } = renderHook(() => useOrders()); expect(result.current.loading).toBe(true); await waitFor(() => { expect(result.current.loading).toBe(false); });

Max Andy Diaz Neyra

student•

Mi solución:

it("Deberia retornar error", async () => {
    mockGetOrders.mockRejectedValue("Hubo un error");
    mockUseSession.mockReturnValue({ user: { id: "1" } });

    const { result } = renderHook(() => useOrders());

    expect(result.current.loading).toBe(true);

    await waitFor(() => {
      expect(result.current.error).toBe(
        "Failed to fetch orders. Please try again later."
      );
      expect(result.current.loading).toBe(false);
      expect(result.current.orders).toEqual([]);
    });
  });
```it("Deberia retornar error", async () => {    mockGetOrders.mockRejectedValue("Hubo un error");    mockUseSession.mockReturnValue({ user: { id: "1" } });
    const { result } = renderHook(() => useOrders());
    expect(result.current.loading).toBe(true);
    await waitFor(() => {      expect(result.current.error).toBe(        "Failed to fetch orders. Please try again later."      );      expect(result.current.loading).toBe(false);      expect(result.current.orders).toEqual(\[]);    });  });

Testeo de Custom Hooks con Testing Library React Hooks

Fundamentos del Testing en React

Pruebas de Frontend con React: Evita Errores Críticos

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

Testing con Table Driven en React: Mejora Mantenibilidad y Cobertura

Desarrollo Orientado a Pruebas (TDD) en React paso a paso

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

Testeo de Órdenes en Dashboard con Vitest y React Testing Library

Testeo de Componentes para Administradores en Platzi Orders

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

Testing con Spies en React: Verificación de Funciones y Errores

Pruebas de Integración y APIs en React

Configuración de Mock Service Worker para Pruebas en Visual Studio Code

Pruebas de React con Mock Service Worker y Hooks

Pruebas de Error 500 en Endpoints con Mock Service Worker

Reflexiones sobre Testing en React

Testing con Inteligencia Artificial en React

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

Cuándo y cómo implementar test en proyectos de React