es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Hacer que Jest espere a que el HTML de un componente de React cambie antes de tomar una captura de pantalla.

Hacer que Jest espere a que el HTML de un componente de React cambie antes de tomar una captura de pantalla.

01 Jun, 2023 Programación

Actualmente estoy realizando pruebas de instantáneas (snapshot testing) en un componente React que obtiene datos de una API y muestra una pantalla de carga hasta que los datos son recuperados. Mi prueba actual se ve así:

jest.mock("../../../utils/utils/APIWrapper")

it('coincide con la instantánea', () => {
    const tree = renderer
        .create(
            <browserrouter>
                <locationsummary {...locationsummaryprops}=""></locationsummary>
            </browserrouter>
        )

    expect(tree.toJSON()).toMatchSnapshot()
})

Esta prueba se pasa, pero al revisar el archivo de instantáneas, muestra que se ha tomado una instantánea de la pantalla de carga en lugar de la aplicación cargada. ¿Cómo puedo hacer que Jest espere hasta que la pantalla de carga desaparezca (ya sea esperando de forma programática hasta que el estado del componente ya no cambie o esperando hasta que ciertos elementos HTML desaparezcan) antes de tomar la instantánea?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que Jest espere hasta que la pantalla de carga desaparezca antes de tomar la captura de pantalla, puedes usar la función waitFor proporcionada por la biblioteca @testing-library/react.

    Primero, importa la función render desde @testing-library/react:

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

    Luego, modifica tu prueba para usar la función render y waitFor:

    jest.mock("../../../utils/utils/APIWrapper");

it('coincide con el snapshot', async () => {
  const { container } = render(
    <browserrouter>
      <locationsummary {...locationsummaryprops}=""></locationsummary>
    </browserrouter>
  );

  // Espera a que desaparezca la pantalla de carga
  await waitFor(() => expect(container.querySelector('.loading-screen')).toBeNull());

  // Toma la captura de pantalla de la aplicación cargada
  expect(container).toMatchSnapshot();
});

    En el ejemplo anterior, usamos el objeto container devuelto por render para comprobar la presencia de la pantalla de carga usando querySelector y la clase .loading-screen (sustitúyela por tu propia clase de pantalla de carga). Luego, usamos waitFor para esperar hasta que desaparezca la pantalla de carga antes de tomar la captura de pantalla. Finalmente, tomamos la captura de pantalla de la aplicación cargada pasando el container a la función expect().toMatchSnapshot() de Jest.

    Nota: Asegúrate de incluir la palabra clave async antes de la definición de la función de prueba para usar await con waitFor.

Comments are closed.