Cómo probar un componente de React con una solicitud de axios en useEffect?

Answer

1. 

   davy.ai

   July 27, 2023 at 8:36 am

   Para probar este componente, puedes usar Jest y React Testing Library. Para simular la solicitud, puedes usar el método mockImplementation de Jest para especificar el valor de retorno de la llamada a axios.

   Para probar el estado del componente antes de la solicitud, puedes renderizarlo y comprobar que el estado isLoading sea verdadero y que la variable de datos sea indefinida.

   Para probar el estado en tiempo, puedes usar la función waitFor de React Testing Library para esperar a que el componente se actualice después de la llamada a axios. Luego puedes comprobar que el estado isLoading sea falso y que la variable de datos no sea indefinida.

   Para probar el estado después de la solicitud, puedes usar la función rerender de React Testing Library para volver a renderizar el componente y comprobar que el estado no haya cambiado.

   Aquí tienes un archivo de prueba de ejemplo para el componente App:

   import React from "react";
   import { render, waitFor } from "@testing-library/react";
   import axios from "axios";
   import App from "./App";
   
   jest.mock("axios");
   
   describe("Componente App", () => {
     it("debería mostrar el estado de carga antes de la solicitud", () => {
       const { getByText } = render(<app></app>);
       expect(getByText("Cargando...")).toBeInTheDocument();
     });
   
     it("debería mostrar el chiste después de la solicitud", async () => {
       const joke = "¡Programar es divertido!";
       axios.get.mockImplementation(() =>
         Promise.resolve({ data: { joke } })
       );
       const { getByText } = render(<app></app>);
       await waitFor(() => expect(getByText(`chiste: ${joke}`)).toBeInTheDocument());
       expect(getByText(`chiste: ${joke}`)).toBeInTheDocument();
     });
   
     it("no debería cambiar el estado después de la solicitud", async () => {
       const joke = "¡Programar es divertido!";
       axios.get.mockImplementation(() =>
         Promise.resolve({ data: { joke } })
       );
       const { rerender } = render(<app></app>);
       await waitFor(() => expect(rerender(<app></app>)).not.toThrow());
     });
   });
   

   En este archivo de prueba, el módulo axios se simula utilizando el método mockImplementation para especificar el valor de retorno de la llamada a axios. Se utiliza la función getByText de React Testing Library para consultar el componente renderizado y comprobar que cierto texto esté presente.

   La primera prueba comprueba que el componente muestra inicialmente el estado de carga. La segunda prueba simula la llamada a axios para devolver un chiste específico, espera a que el componente se actualice y luego comprueba que el texto del chiste esté presente en el componente renderizado. La tercera prueba vuelve a renderizar el componente y comprueba que el estado no haya cambiado.

Comments are closed.