Estoy tratando de llamar a una función simulada usando el atributo onClick, probando con React Testing Library. La prueba es algo que estoy tratando de mejorar, pero por lo que entiendo hasta ahora con lo que tengo.
Lo que estoy probando es que se llama a una función cuando se hace clic en el botón, estoy representando el componente (componente con estilo) al que se le pasa la función como accesorio.
(La función en sí misma es asíncrona, pero como solo me estoy burlando de que se está llamando a una función en el botón, solo estoy usando getBy)
archivo de prueba
import { render, screen, fireEvent } from "@testing-library/react"; import QuoteButton from "../Components/QuoteButton"; test("fire event from QuoteButton component", () => { const mockCollect = jest.fn(); render(<QuoteButton onClick={mockCollect}>get a quote</QuoteButton>); const buttonElement = screen.getByRole("button", { name: /get a quote/i }); fireEvent.click(buttonElement); expect(mockCollect).toHaveBeenCalledTimes(1); });Componente
import styled from 'styled-components' const StyledButton = styled.button` cursor: pointer; background: transparent; font-size: 18px; border-radius: 3px; border-color: #f9a800; &:hover { background-color: #ff7800; color: #fbfbf8 } ` const QuoteButton = ({ children, collect }) => { return <StyledButton data-testid="quoteButton" onClick={collect}>{children}</StyledButton> } export default QuoteButtonEstá recibiendo 0 número de llamadas, ¿hay algo más que deba buscar o probar? Cualquier ayuda apreciada. Entiendo que debido a que me estoy burlando de una función con jest.fn(), algo debe estar pasando.
Tiene un accesorio llamado collect que no se pasa en su prueba, en su lugar está usando onClick .
import { render, screen, fireEvent } from "@testing-library/react"; import QuoteButton from "../Components/QuoteButton"; test("fire event from QuoteButton component", () => { const mockCollect = jest.fn(); {/* Wrong: QuoteButton uses 'collect' as a prop */} // render(<QuoteButton onClick={mockCollect}>get a quote</QuoteButton>); {/* Right: collect will be the prop passed to your internal component's 'onClick' */} render(<QuoteButton collect={mockCollect}>get a quote</QuoteButton>); // --> const buttonElement = screen.getByRole("button", { name: /get a quote/i }); fireEvent.click(buttonElement); expect(mockCollect).toHaveBeenCalledTimes(1); }); En el código original, usted define en su <QuoteButton> un accesorio de collect y luego lo pasa a su onClick de <button> , básicamente está diciendo: onClick -> llame a la referencia de recopilación, por favor.
Dado que en su especificación no envía nada para recopilar a <QuoteButton> , no tiene nada que llamar en su especificación. Además, dado que no hace nada con el onClick recibido, tampoco cambia nada.