Testeo de Custom Hooks con Testing Library React Hooks
Contenido del curso
Luis Fernando Valladares Castro
Wilmer Garzon Cabezas
Team Platzi
Matthew Seidel Morcillo
José Ángel Arreola González
Andres Gallego
Yakira Jaraba pineda
Erick Martinez
Wilmer Garzon Cabezas
Team Platzi
Ulqernesh Karvenae
Jesús Manuel Alarcón Maldonado
Cesar González Caballero
Max Andy Diaz Neyra
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:
¡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 🥇💚
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
Para usuarios que esten usando NPM y react mayor a la versión 18, la libreria instala en el inicio del curso, testing-library/react ya incluye el renderHook , Saluditos ✌️
Esta es mi solucion al reto del eror.
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
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"
¡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. 🚀
💻👨💻 ¡Listo el reto! Valide que en el primer caso de uso el error fuera "null" porque así funciona en la lógica de nuestro custom hook:
it("Deberia obtener las ordenes", async () => { const mockOrders = [ { id: "f47ac10b-58cc-4372-a567-0e02b2c3d479", customer: { id: "60d07f61-99bf-4b90-955b-5d3a7c9bb3d4", name: "John Doe", email: "john.doe@example.com", }, products: [ { id: "7567ec4b-b10c-48c5-9345-fc73c48a80a2", name: "Laptop", price: 999.99, quantity: 1, }, { id: "7567ec4b-b10c-48c5-9345-fc73c48a80a3", name: "Mouse", price: 29.99, quantity: 1, }, ], total: 1029.98, status: "delivered", orderDate: "2023-10-01T10:00:00Z", shippingAddress: { street: "123 Main St", city: "Anytown", state: "CA", zipCode: "12345", country: "USA", }, paymentMethod: "credit_card", }, ]; mockGetOrders.mockResolvedValue(mockOrders); mockUseSession.mockReturnValue({user: {id: 1 }}) const { result } = renderHook(() => useOrders()); expect(result.current.loading).toBe(true); await waitFor(() => { expect(result.current.loading).toBe(false); expect(result.current.orders).toEqual(mockOrders); expect(result.current.error).toBe(null); }); });
Y acá validé el caso de error, que lo que hace es settear un texto de error en este estado:
it("Deberia mostrar el mensaje de error", async () => { mockGetOrders.mockRejectedValue("Failed to fetch orders. Please try again later."); const { result } = renderHook(() => useOrders()); await waitFor(() => { expect(result.current.error).toBe("Failed to fetch orders. Please try again later."); }); });
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); });
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(\[]); }); });
