Día 4. Testing + DOM. Cómo testear aplicaciones en front

Uno de los grandes problemas a la hora de testear aplicaciones en frontend radica en la constante manipulación del DOM. Al introducir los tests unitarios ya explicamos que no debíamos testear librerías o APIs de terceros (y el DOM es una API del navegador). Pero… ¿Cómo comprobamos que se están produciendo los efectos deseados en el DOM? ¿Qué estamos renderizando en pantalla ese producto que acabamos de crear, o eliminando del render el usuario que acabamos de eliminar?

Lo primero que tendremos que conseguir será acceder al DOM, para lo cual deberemos preparar nuestro entorno de tests y utilizar librerías especializadas.

¿Por qué es problemático testear el DOM?

La manipulación del DOM provoca lo que conocemos como efectos secundarios (explicados entre los conceptos intermedios de testing en la última lección): cuando ejecutamos una función que añade, modifica o elimina un nodo HTML, sus efectos se producen en el DOM, que es un objeto global, y no en la propia función.

Para comprobar estos efectos vamos a necesitar un navegador. O, al menos, un emulador de navegador. Recuerda que el DOM no tiene sentido fuera del navegador.

En la lección anterior vimos que una opción sería mockearlo. Podemos hacer un mock del DOM para emular sus propiedades y métodos y lanzar nuestros tests… pero el DOM es un objeto muy complejo. De modo que siempre será más fácil apoyarnos en librerías externas.

Personalizando nuestro entorno de desarrollo

Por defecto, nuestro test runner se ejecuta en NodeJS. Esto implica que podemos acceder a todas las apis y módulos de node, pero no a las APIs del navegador.

Sin embargo, tenemos la posibilidad de instalar paquetes como JSDOM o Happy-DOM, que virtualizan el entorno del navegador para que podamos utilizar un DOM emulado y lanzar nuestros tests.

Para configurar un entorno de desarrollo basado en JSDOM o Happy-DOM tenemos que abrir nuestro package.json y editar o añadir un script:

“test”: “vitest --environment happy-dom”

o bien:

“dom-test”: “vitest --environment jsdom”

Por supuesto, la configuración de este tipo de entorno requerirá de la instalación de las librerías happy-dom o jsdom.

Instaladas las librerías y configurados los scripts tendremos que importar nuestro documento HTML para poder hacer tests sobre él.

import fs from "fs";

import path from "path";

const htmlPath = path.join(process.cwd(), "index.html");

const htmlDoc = fs.readFileSync(htmlPath, "utf8");

El siguiente paso será instanciar un objeto window y sustituir su global document con la que generemos ad hoc:

import { vi } from "vitest";

import { Window } from "happy-dom";

const window = new Window();

const document = window.document;

document.write(htmlDoc);

vi.stubGlobal("document", document);

¿Cómo testear el DOM?

Gracias a librerías como happy-DOM o JSDOM podemos testear el DOM como lo haríamos normalmente. Sin embargo, ten en cuenta que es posible que necesites hacer tareas de limpieza, caso en el cual deberemos reescribir el document como lo hicimos para inicializar los tests, utilizando el hook beforeAll() o dentro del propio test.

Recuerda que podemos comprobar todos los atributos HTML mediante las propiedades del HTMLElement que seleccionemos dentro del test.

Por último, cabe destacar la existencia de librerías como Testing Library, que nos ofrecen métodos utilitarios para trabajar con eventos y otras funcionalidades avanzadas.

Curso de introducción al testing

Visita mi repositorio intro-to-testing para ver ejemplos de todo lo que hemos visto a lo largo de este curso: