Tengo un componente funcional que quiero probar con broma. Pero no pude evaluar los resultados. ¿Cómo debo escribir pruebas para un componente como este? Aquí está mi componente que quiero probar:
import React from "react"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; import ExpenseForm from "./ExpenseForm"; import { addExpense } from "../store/expenses/actions"; const AddExpensePage = () => { const dispatch = useDispatch(); const navigate = useNavigate(); function onSubmit(expense) { dispatch(addExpense(expense)); navigate("/"); } return ( <div> <h1>Add Expense</h1> <ExpenseForm onSubmit={onSubmit} /> </div> ); }; export default AddExpensePage;He escrito estas pruebas:
import React from "react"; import * as reactRedux from "react-redux"; import { shallow } from "enzyme"; import AddExpensePage from "../AddExpensePage"; import expenses from "../../fixtures/expenses"; // Mock useDispatch hook const useDispatch = jest.spyOn(reactRedux, "useDispatch"); jest.mock("react-redux", () => ({ ...jest.requireActual("react-redux"), useDispatch: jest.fn(), })); const mockedUsedNavigate = jest.fn(); jest.mock("react-router-dom", () => ({ ...jest.requireActual("react-router-dom"), useNavigate: () => mockedUsedNavigate, })); beforeEach(() => { useDispatch.mockClear(); }); test("should render AddExpensePage correctly", () => { const wrapper = shallow(<AddExpensePage />); expect(wrapper).toMatchSnapshot(); }); test("should handle onSubmit", () => { const dispatch = jest.fn(); useDispatch.mockReturnValue(dispatch); const onSubmitSpy = jest.fn(); const wrapper = shallow(<AddExpensePage onSubmit={onSubmitSpy} />); wrapper.find("ExpenseForm").prop("onSubmit")(expenses[1]); expect(dispatch).toHaveBeenCalled(); expect(mockedUsedNavigate).toHaveBeenLastCalledWith("/"); // expect(onSubmitSpy).toHaveBeenLastCalledWith(expenses[1]); });No estoy seguro si esta línea funciona "wrapper.find("ExpenseForm").prop("onSubmit"))(expenses[1]);"
También quiero probar esto "expect(onSubmitSpy).toHaveBeenLastCalledWith(expenses[1]);". Pero no pude encontrar cómo hacer esto.
¿Tienes alguna idea para ayudarme?
Indique cómo debo escribir pruebas de dichos componentes.
Gracias por adelantado.
Se recomienda probar el comportamiento de los componentes, no su implementación. Entonces, en lugar de invocar su función mediante programación, debe encontrar el botón que la invoca y simular el clic. Lo mismo con la entrada de texto (supongo) que está aceptando los datos manejados por la función probada.
Además, no puede simplemente burlarse de una función pasándola como accesorio si su componente no acepta dicho accesorio.
test("should handle onSubmit", () => { const dispatch = jest.fn(); const navigate = jest.fn(); useDispatch.mockReturnValue(dispatch); useNavigate.mockReturnValue(navigate); const wrapper = shallow(<AddExpensePage />); const submitBtn = wrapper.find('button[type="submit"]'); submitBtn.simulate('change', { target: { value: 'myMock' } } ); expect(dispatch).toHaveBeenCalled(); expect(navigate).toHaveBeenCalledWith("/"); });