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.

  • es.davy.ai/
  • Programación /
  • Forma simple de probar la respuesta de los datos de axios desencadenados por el botón de envío.

Forma simple de probar la respuesta de los datos de axios desencadenados por el botón de envío.

27 Jul, 2023 Programación

¿Hay alguna manera sencilla de probar la respuesta de datos de axios desencadenada por el botón de envío?

Y en general, realmente estoy teniendo problemas una vez que se trata de pruebas un poco más complejas o asíncronas. ¿Existe una herramienta simple que me permita crear pruebas de forma sencilla y fluida?

import React, { useEffect, useState } from "react";
import axios from "axios";

const ContactForm = () => {
  const onSubmitFormHandler = (event) => {
    const url = process.env.REACT_APP_SERVER_API + "/lead";

    try {
      axios
        .post(url, {
          headers: {
            "Content-Type": "application/json",
          },
          params: {
            data: leadObj,
          },
        })
        .then(function (response) {
          if (response.status === 200) {
            // hacer algo
          } else {
            // hacer algo más
          }
        })
        .catch((error) => {});
    } catch (error) {}
  };

  return (
    <form onsubmit="{onSubmitFormHandler}">
      <button data-testid="submit" type="submit">
        {!loader ? "enviar" : <loader></loader>}
      </button>
    </form>
  );
};

export default ContactForm;
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una manera sencilla de probar los datos de respuesta de axios desencadenados por un botón de envío usando react-testing-library y jestjs.

    Primero, puedes crear un archivo de prueba e importar las dependencias necesarias:

    import React from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import ContactForm from './ContactForm';
import axios from 'axios';

    Luego, puedes escribir un caso de prueba para simular el clic en el botón de envío y simular la solicitud de axios:

    it('debería enviar el formulario y mostrar un mensaje de éxito', async () => {
  const fakeResponse = { status: 200 };
  jest.spyOn(axios, 'post').mockImplementation(() =>
    Promise.resolve(fakeResponse)
  );
  render(<contactform></contactform>);
  fireEvent.click(screen.getByTestId('submit'));
  await waitFor(() =>
    expect(
      screen.getByText('Tu mensaje se ha enviado exitosamente!')
    ).toBeInTheDocument()
  );
});

    En general, si tienes problemas con pruebas más complejas o asíncronas, puedes usar bibliotecas de pruebas como react-testing-library, que proporcionan una API sencilla y fluida para probar componentes de React. Además, puedes usar funciones simuladas y jestjs para simular y probar comportamientos asíncronos.

Comments are closed.