Testing de APIs Externas con MSW (Parte 2)

¿Cómo configurar pruebas para manejar errores de servidor?

En este tutorial, aprenderás a configurar casos de prueba para manejar errores del servidor, específicamente aquellos que retornan un código 500, utilizando Mock Service Worker (MSW). ¡Esos errores temidos por los desarrolladores, pero excelentes fuentes de aprendizaje!

¿Cómo crear un caso de prueba para errores específicos?

Para gestionar casos de error, no siempre es necesario reconfigurar desde cero el Mock Service Worker. En este caso, ya tenemos configurado un response para la ruta /orders. Ahora, agregaremos un response para un caso de error específico.

1. Importa las dependencias necesarias:

   • Desde MSW, importa http y httpResponse.
   • Asegúrate de importar tu servidor mock.

2. Configura el servidor:

   • Usa server.use para inicializar el servidor.

3. Define el comportamiento para un error 500:

   • Utiliza http.get especificando la URL deseada.
   • Configura el httpResponse para retornar un código de estado 500 con un mensaje de error claro.

server.use(
  http.get('http://example.com/orders', () => {
    return httpResponse(
      status: 500,
      statusText: 'Internal Server Error'
    );
  })
);

¿Cómo manejar resultados y excepciones en los tests?

El siguiente paso es inicializar el hook y manejar apropiadamente el error en tu prueba. Aunque puedes optimizar el proceso utilizando funciones, aquí te mostramos cómo hacerlo manualmente para entender mejor el flujo:

• Inicializa y renderiza el hook: Utiliza renderHook para gestionar el hook useOrder.
• Espera el próximo update y verifica el resultado: Asegúrate de que el mensaje de error coincida con el esperado.

const { result, waitForNextUpdate } = renderHook(() => useOrders());

await waitForNextUpdate();

expect(result.current.error).toBe('Failed to fetch orders. Sorry, please try again.');

¿Cómo validar las pruebas?

Verifica que tu prueba identifique correctamente los errores cambiando el mensaje de error y confirmando que las excepciones se manejan adecuadamente. Este paso es crucial, ya que asegura que tu aplicación responde como se espera a los problemas de red.

Finalmente, animarte a crear funciones que abstraigan la repetición y, así, simplifiquen tu código. Además, nos preparamos para la siguiente etapa emocionante: correr coverage sobre nuestros tests, que nos otorgará una visión clara sobre qué tan bien están cubiertas nuestras funcionalidades. ¡Allá vamos!