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.

Burlándose de un rechazo personalizado de promesa con jest y react

Estoy intentando probar un código dentro de un bloque de catch usando React Testing Lib y Jest.
Las solicitudes son manejadas dentro del componente a través de axios.

Estoy simulando axios de la siguiente manera:

“`jest.mock(‘axios’);
const mockedAxios = axios as jest.Mocked;

Usando `mockRejectedValue`.

**Test**

test(‘returns throws error’, async () => {
mockedAxios.post.mockRejectedValue({ statusText: ‘blah’, status: 404 });
userEvent.type(screen.getByLabelText(/username/i), ‘blah’);
userEvent.type(screen.getByLabelText(/password/i), ‘blah’);
userEvent.click(screen.getByRole(‘button’));
const error = await screen.findByText(/404 blah/i);
expect(error).toBeInTheDocument();
});


Dentro del bloque catch:


} catch (error) {
console.log(error) //el test anterior registra el error como undefined

  let errMessage = 'Service Error'; //error genérico

  if (isErrorResp(error)) { //error con propiedades específicas que quiero probar
    errMessage = `${error.status} ${error.statusText}`;
  }

  setNetworklError({ error: true, message: errMessage });
  setIsloading(false);

}
“`

El test anterior correctamente rechaza la promesa e ingresa al bloque catch. Sin embargo, el error registrado con console.log(error) siempre es undefined. Como resultado, isErrorResp(error) nunca se ejecuta y la interfaz de usuario solo muestra el error predeterminado.

No estoy seguro de cómo pasar un rechazo simulado con una respuesta personalizada.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para probar correctamente el código dentro del bloque catch, es necesario proporcionar una respuesta simulada que incluya las propiedades que se desean probar. Esto se puede hacer creando un nuevo objeto con las propiedades deseadas y pasándolo a mockRejectedValue de la siguiente manera:

    test('return throws error', async () => {
      const errorObj = { response: {statusText: 'blah', status: 404 } };
      mockedAxios.post.mockRejectedValue(errorObj);
      userEvent.type(screen.getByLabelText(/username/i), 'blah');
      userEvent.type(screen.getByLabelText(/password/i), 'blah');
      userEvent.click(screen.getByRole('button'));
      const error = await screen.findByText(/404 blah/i);
      expect(error).toBeInTheDocument();
    });
    

    En este ejemplo, creamos un nuevo objeto errorObj que incluye la propiedad response con las propiedades de error deseadas. Luego pasamos este objeto a mockRejectedValue como el valor a lanzar. Esto debería activar correctamente el bloque catch y permitirle probar el código dentro de él utilizando las propiedades de error personalizadas.

Comments are closed.