Estoy tratando de espiar una función dentro de un componente de función usando la biblioteca de pruebas de reacción. Quería probar si se ha llamado a la función handleClick cada vez que se hace clic en el botón.
Aquí hay un extracto de mi código
Componente
const Foo = () => { const handleClick = () => {} return <div> <button data-testid="button" onClick={handleClick}>Continue</button> </div> }Caso de prueba
it("should handle continue button click", async () => { const { getByTestId } = render(<Foo />); const button = getByTestId("button"); const spy = jest.spyOn(Foo, "handleClick"); act(() => { fireEvent.click(button); }); expect(spy).toHaveBeenCalled(); });El error que estoy recibiendo es el siguiente
Cannot spy the handleClick property because it is not a function; undefined given instead¿Alguien podría ayudar?
Está intentando espiar handleClick como si fuera una propiedad de Foo, que es una función.
Puedo mover handleClick a otro archivo e importarlo tanto en el componente como en la prueba:
manejador.js
export const handleClick = () => {}Componente
import { handleClick } from './handler.js' const Foo = () => { return <div> <button data-testid="button" onClick={handleClick}>Continue</button> </div> }Caso de prueba
import * as handlers from './handler.js'; it("should handle continue button click", async () => { const { getByTestId } = render(<Foo />); const button = getByTestId("button"); const spy = jest.spyOn(handlers, "handleClick"); act(() => { fireEvent.click(button); }); expect(spy).toHaveBeenCalled(); });No querrás espiar handleClick . En su lugar, desea probar qué efecto tuvo handleClick en el componente. Su devolución de llamada handleClick es un detalle de implementación y, como regla general, no prueba eso.