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.

Cómo probar la solicitud fetch post utilizando Jest.

14 Jun, 2023 Programación

Cómo simular la declaración fetch usando jest

export default function Login() {
  function LoginUser() {
    const requestOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      body: JSON.stringify({ username: username, password: password }),
    };
    fetch('http://localhost:8080/post', requestOptions)
      .then((response) => {
        if (response.status === 200) {
          console.log('éxito');
        } else {
          throw new Error('Credenciales inválidas');
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

<button block="" size='lg' type='submit' onclick="{LoginUser}" disabled="{!validateForm()}">
    Iniciar sesión
  </button>;
}

El código anterior debe ser probado unitariamente usando jest mock. Al hacer clic en el botón Login, la función LoginUser está lanzando una solicitud POST.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para simular la sentencia fetch usando jest en el código anterior, podemos usar la biblioteca jest-fetch-mock. Esta biblioteca nos permite simular solicitudes fetch en pruebas.

    Primero, necesitamos instalar la biblioteca jest-fetch-mock usando npm:

    npm install jest-fetch-mock --save-dev

    Después de instalar la biblioteca, podemos usar el método fetch.mockResponse() para simular la solicitud fetch. Aquí hay un ejemplo:

    import fetchMock from 'jest-fetch-mock';

describe('Inicio de sesión', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });

  it('debería iniciar sesión de un usuario', async () => {
    fetchMock.mockResponse(JSON.stringify({ success: true }), { status: 200 });

    // Desencadenar la función de inicio de sesión
    await LoginUser();

    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/post', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({ username: username, password: password }),
    });
    expect(console.log).toHaveBeenCalledWith('succesfull');
  });
});

    En el código anterior, primero restablecemos la simulación fetch usando fetchMock.resetMocks(). Luego simulamos la solicitud fetch usando fetchMock.mockResponse(). Dentro del bloque it(), desencadenamos la función LoginUser() y afirmamos que se realiza la solicitud fetch con los parámetros correctos y que se llama a console.log con el mensaje correcto.

    Tenga en cuenta que necesitamos hacer que la función LoginUser() sea async para poder usar await dentro de la prueba. Además, asegúrese de importar fetchMock y llamar a fetchMock.enableMocks() al principio del archivo de pruebas.

Comments are closed.