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.

Cómo simular correctamente los manipuladores de eventos con React Testing Library.

10 Jun, 2023 Programación

Tengo un componente React que toma una cadena y renderiza un reproductor de audio. Este reproductor de audio tiene algunos controladores: handlePlay, handleError, handleSeek, y otros.

Me gustaría escribir algunas pruebas unitarias sobre los controladores, pero no sé qué simular. Una prueba de cobertura muestra que las líneas alrededor de los controladores están en rojo, así que asumo que hay que abordarlos, ya que no puedo acceder al estado para verificar los nuevos valores.

Llegué hasta aquí:

<button data-testid="" onclick="{handlePlay}">Button</button>
...
const { queryByTestId } = render(<player id="abc"></player>);
const button = queryByTestId("button");
fireEvent.click(button);

El botón se está haciendo clic, pero no sé cómo probar si el controlador se ha llamado en absoluto.

Intenté simular el controlador:

const handlePlay = jest.fn();
handlePlay.mockImplementation(() => { console.log("works.."} );
expect(handlePlay).toBeCalled(); // o toHaveBeenCalled

Pero recibo:

Expected number of calls: >= 1
Received number of calls: 0

¿Cómo debo simular correctamente los controladores básicos de mi componente, para luego escribir algunas afirmaciones básicas?

Ten en cuenta que estos controladores no se pasan al componente, el componente solo toma una cadena.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para simular adecuadamente los manipuladores del componente, puedes crear una función espía utilizando el método jest.spyOn() de Jest. Esto te permite rastrear las llamadas a funciones y hacer afirmaciones sobre ellas. Aquí hay un ejemplo:

    // En tu archivo de prueba

import { fireEvent } from '@testing-library/react';

// Importa el componente que quieres probar
import Player from './Player';

describe('Componente Player', () => {
  test('se llama a handlePlay cuando se hace clic en el botón', () => {
    const handlePlaySpy = jest.spyOn(Player.prototype, 'handlePlay');

    const { getByTestId } = render(<player id="abc"></player>);
    const button = getByTestId('button');

    fireEvent.click(button);

    expect(handlePlaySpy).toHaveBeenCalled();

    handlePlaySpy.mockRestore();
  });
});

    En este ejemplo, usamos jest.spyOn() para espiar el método handlePlay del componente Player. Luego renderizamos el componente y usamos fireEvent.click() para simular un clic en el botón. Finalmente, afirmamos que se llamó a handlePlay comprobando que la función espía fue llamada al menos una vez.

    Hay que tener en cuenta que también necesitamos llamar a handlePlaySpy.mockRestore() al final de la prueba para limpiar la función espía.

Comments are closed.