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(\[]);    });  });