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.

Enviar formulario interno de React

21 Jul, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para probar la función interna handleSubmit sin pasarla como una propiedad, puedes utilizar el método fireEvent.submit() en lugar de fireEvent.click() en el caso de prueba. Esto provocará el envío del formulario y llamará a la función interna handleSubmit.

    Así es como se vería el caso de prueba modificado:

    import React from "react";
import { render, fireEvent } from "react-testing-library";
import Form from "./Form";

it("submits", () => {
  const { getByText, getByPlaceholderText } = render(<form></form>);
  const input = getByPlaceholderText("Enter a value"); // asumiendo que tu campo de entrada tiene un texto de marcador de posición
  const form = getByText("Add").parentNode;

  // establece el valor de entrada y envía el formulario
  fireEvent.change(input, { target: { value: "test" } });
  fireEvent.submit(form);

  // verifica si la función handleSubmit fue llamada
  expect(console.log).toHaveBeenCalledWith("submit", "test");
});

    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 interna handleSubmit fue llamada o no verificando si console.log() fue llamado con los valores esperados.

    Nota: console.log() solo se utiliza con fines ilustrativos, puedes reemplazarlo con tu implementación real de handleSubmit.

Comments are closed.