Entornos de ejecución en tests de Frontend
Cuando ejecutamos tests de Frontend, lo hacemos en un entorno de ejecución concreto, preparando todo lo necesario para que el test pueda evaluar el comportamiento de la pieza de código que estamos testeando.
En este artículo, hablaré de los entornos de ejecución que existen, cuándo usarlos y cómo prepararlos.
Entornos de ejecución
El entorno de ejecución es el entorno en el que se ejecuta el código que estamos testeando.
Todos los frameworks de testing de Frontend tienen un entorno de ejecución por defecto, pero podemos usar otros entornos de ejecución si lo necesitamos. Veamos los más comunes.
Node
Node es el entorno de ejecución por defecto de muchos frameworks de testing de Frontend, como Mocha, Jest o Vitest.
Este entorno nos permite ejecutar código JavaScript/TypeScript en un entorno Node.js, lo que significa que solo tendremos compatibilidad con la API de Node.js, en concreto, la que ofrezca la versión que estamos utilizando en la ejecución.
Emulador de navegadores
En aplicaciones web desarrolladas para ser utilizadas en un navegador, podemos usar un entorno que emule al navegador. Estos entornos nos ofrecen la posibilidad de ejecutar, de manera estable, tests que utilizan la API del navegador.
La herramienta más conocida para emular al navegador es jsdom, pero hay otras como happy-dom que están empezando a ganar popularidad.
Navegador real
Esta opción permite ejecutar los tests directamente en el navegador, lo que nos permite testear el comportamiento de la aplicación web de manera más realista.
En este caso, no hace falta utilizar ningún paquete de emulación, pero en su lugar necesitaremos que el dispositivo que ejecuta los tests disponga de las dependencias necesarias para poder abrir el navegador especificado en el que se ejecutarán los tests.
Cuándo usar cada entorno de ejecución
A priori, la decisión es sencilla:
- Si el código que estamos testeando no es específico de un navegador, usaremos Node.
- Si el código que estamos testeando es específico de un navegador, usaremos un emulador de navegadores o un navegador real.
Respecto al último punto, hay varias consideraciones que debes evaluar para saber si tu código debe probarse en un entorno simulado o real.
Utiliza un entorno de navegador real cuando:
- el dispositivo permita ejecutar el navegador especificado para la ejecución de los tests.
- necesites probar el código en diferentes navegadores y/o versiones.
Utiliza un emulador de navegador cuando:
- no dispongas de un dispositivo que pueda ejecutar el navegador especificado.
- no necesites probar el código en diferentes navegadores y/o versiones.
Además de las consideraciones anteriores, me gustaría recordar que los usuarios de la aplicación utilizan navegadores reales, y que los entornos emulados no ofrecen el mismo soporte a las APIs que implementan cada una de las versiones de los navegadores.
En este sentido, la conclusión es clara: utiliza un entorno de ejecución que utilice un navegador real siempre que sea posible. Si no es posible, te recomiendo analizar el por qué.
En el caso de querer explorar esta vía te dejo algunas opciones:
- Vitest Browser Mode
- Karma runner con Mocha o Jasmine
- Playwright
Cómo preparar un entorno de ejecución
Llegados a este punto, con el entorno decidido, lo normal es que el entorno en sí no afecte a cómo preparamos lo necesario para la ejecución del test.
Si has leído el artículo anterior sobre Técnicas de Mocking en tests de Frontend, habrás pensado que es habitual necesitar preparar algunos aspectos antes de la ejecución del test, y limpiar o reiniciar estados tras la ejecución.
Algunos ejemplos de aspectos a preparar antes de la ejecución son:
- Inicializar el mock server.
- Definir props o parámetros.
- Inicializar el estado de la aplicación.
Eso significa que, después de ejecutar el test, habrá que:
- Restablecer los mocks.
- Limpiar o reiniciar estados.
- Cerrar alguna conexión abierta.
Teniendo esto en cuenta, me gusta que la forma de organizar los tests sea plana, es decir, sin muchos describe anidados.
Además, creo firmemente en mantener los tests lo más independientes posible, encapsulando toda la responsabilidad de cada test
dentro del mismo. Eso significa que el uso de hooks (como beforeAll, beforeEach, afterEach o afterAll) debe ser mínimo.
Estos dos aspectos ayudarán a que los tests sean más sencillos de entender, mantener y ejecutar.