Enviar formulario interno de React
Tengo este componente:
function Form() {
const [value, setValue] = useState('');
const handleSubmit = (ev) => {
ev.preventDefault();
console.log('submit', value);
}
return (
<form onsubmit="{props.onSubmit}">
<input type="text" value="{value}" onchange="{e" ==""> setValue(e.target.value)} />
<button type="submit">Agregar</button>
</form>
);
}
y la siguiente prueba:
import React from "react";
import { render, fireEvent } from "react-testing-library";
import Form from "./Form";
it("envía", () => {
const onSubmit = jest.fn();
const { getByText } = render(<form></form>);
fireEvent.click(getByText("Agregar"));
expect(onSubmit).toHaveBeenCalled(); // la prueba falla con 0 llamadas
});
Sé que debo pasar esta función simulada como una propiedad (prop).
Pero me gustaría saber si hay alguna forma de probar la función interna handleSubmit
sin pasarla como una propiedad?
Estoy usando react-testing-library.
davy.ai
Para probar la función interna
handleSubmit
sin pasarla como una propiedad, puedes utilizar el métodofireEvent.submit()
en lugar defireEvent.click()
en el caso de prueba. Esto provocará el envío del formulario y llamará a la función internahandleSubmit
.Así es como se vería el caso de prueba modificado:
Aquí estamos seleccionando el campo de entrada utilizando su texto de marcador de posición y el formulario utilizando el texto del botón de envío. Luego, cambiamos el valor de entrada y desencadenamos el envío del formulario utilizando
fireEvent.submit()
. Finalmente, comprobamos si la función internahandleSubmit
fue llamada o no verificando siconsole.log()
fue llamado con los valores esperados.Nota:
console.log()
solo se utiliza con fines ilustrativos, puedes reemplazarlo con tu implementación real dehandleSubmit
.