Testeando componentes de React con Enzyme

Hace unos días me tocó ponerme a investigar la librería Enzyme con el objetivo de testear algunos componentes de React. Para mi sorpresa, la curva de aprendizaje fue tranquila y rápida: en pocas horas ya tenía los tests que me había propuesto hacer con un hermoso tilde verde al costadito.

El framework de testing que uso es Mocha, pero Enzyme asegura ser compatible también con Karma, Jest y Lab.

render vs shallow vs mount

Una de las primeras cosas que tuve que entender de Enzyme es que ofrece tres maneras diferentes de renderizar un componente.

shallow() permite testear un componente sin siquiera pasar por el DOM rendering que hace React. La ventaja de este método es que, al no requerir un entorno de navegador para funcionar, es muy rápido.

mount() sí realiza un render en el DOM del componente, lo cual nos permite testear interacciones del usuario (eventos).

render() lo que hace es devolver la estructura HTML estática resultante del render del componente, y nos permite navegarla a través de un wrapper de la popular librería cheerio.

JSDOM

`mount` necesita correr dentro del entorno de un navegador, por lo cual es obligatorio integrar la librería jsdom para que esta parte de Enzyme funcione.

Para integrarla sin todo el boilerplate que significaría hacerlo archivo por archivo, utilicé la pequeña librería jsdom-global, creada justamente para obtener una instancia de jsdom con los valores por defecto con sólo importarla.

npm install -D jsdom jsdom-global

Los tests

Con esto ya resuelto y con la ayuda de la librería de assertions expect, me puse a armar los tests.

Comparto a modo de ejemplo algunos tests para un componente `Checkbox`, que no hace mucho más que renderizar un `input` con algunas propiedades.

Resulta bastante simple testear cosas básicas de un componente como corroborar que la cantidad de hijos sean la esperada, o que el callback prop se llama correctamente cuando se dispara un evento.

debug()

Uno de los métodos que más útil me resultó fue`wrapper.debug()`, que te permite imprimir en la consola cómo se renderizó el componente y así saber dónde le estás pifiando :)