Como realizar test en React con Jest y Enzyme. Parte 2 (Básico: práctica).

Este artículo es la segunda parte de como testear proyectos React con Jest y Enzyme, en donde comenzaremos a instalar dependencias y a realizar el primer test. Si no leyó la historia anterior, pueden encontrarla en este enlace.

Preparando entorno

Primero que todo, hay que tener un proyecto en React para poder testearlo. En mi caso, crearé un proyecto desde cero con create-react-app para poder realizar algunas pruebas básicas. Para esto, creamos un proyecto con el siguiente comando:

npx create-react-app my-testing-app

Una vez creado el proyecto, es hora de instalar los elementos necesarios para testearlo. Como ya existe jest al crear el proyecto con create-react-app, solo es necesario instalar enzyme. Para esto, lo instalamos con el siguiente comando:

npm i --save-dev enzyme enzyme-adapter-react-16

Y con esto ya estamos preparados para realizar los primeros test.

Comenzando

A medida que se vaya avanzando en estas historias, tanto los elementos a testear como los mismos test irán subiendo en su dificultad. Partiremos con pruebas sencillas de casos simples de javascript, para finalizar con casos muy raros y personalizados.

Si no entiendes lo que sigue a continuación, te recomiendo que sigas los videos de Nicolás Schürmann, con los cuales tendrás los conocimientos de React necesarios para seguir con sus test.

Functions

El elemento mas básico que se puede testear en el proyecto es una función. Una función básica y simple sería una que permita manipular números, como la suma, así que partiremos con esa. Para esto, creamos un archivo llamado utils.js y pegamos la siguiente función:

export function sum(a, b) {return a + b;}

Como se puede ver, es una función sencilla con dos parámetros y que retorna la suma de esos dos números. Para testearlo, debemos crear un archivo en su mismo nivel con el nombre utils.test.js, y con este código dentro:

import {sum} from './utils';
describe('utils.js', () => {
 test('sum', () => {
  expect(sum(2, 5)).toEqual(7);
 })
})

En donde:

• describe: Es una función de Jest que sirve para poder agrupar test relacionados entre sí. En este caso, si existiera otra función en utils.js llamada resta, debería estar dentro de describe porque se encuentra en el mismo contexto.
• test: Es una función de Jest en donde debes escribir toda la lógica asociadas con respecto a la prueba que deseas realizar (también se puede utilizar el alias it). En este caso, dentro de test colocamos la función que queremos testear.
• expect: Para las pruebas, normalmente uno necesita revisar si los valores obtenidos son los esperados. Expect nos brinda una cantidad enorme de matchers para poder verificar estos valores. En este caso, esperamos que la suma de 2 y 5, toEqual a 7. (Creo que no vale la pena poner la traducción). Son demasiados los matchers que existen, así que si quieren ser mas precisos a la hora de revisar un valor, es bueno darse una vuelta por la documentación.

Y listo! Ya tenemos nuestro primer test. Es hora de crear algo mas propio de React para poder realizar nuestro primero test de cobertura.

Stateless Component

Un componente sin estado es el primer elemento propio de React que vamos a testear. A diferencia igualmente de las funciones, esta vez si necesitaremos la ayuda de Enzyme.

Para poder testear, primero se debe crear el stateless component. Algo sencillo sería:

export const StateLessComponent = {children} => <div>{children}</div>

Un pequeño componente que simplemente renderiza un div. Como no tenemos ciclo de vida en stateless componente (Hey! Por ahora, después veremos los test con hooks) no necesitamos nada mas por ahora.

El test correspondiente para este componente sería algo así:

import React from 'react';
import {configure, shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {ComponentStateless} from './ComponentStateless';

configure({adapter: new Adapter()});

describe('<ComponentStateless/>', () => {
    test('render', () => {
        const wrapper = shallow(<ComponentStateless/>);
        expect(wrapper.find(ComponentStateless)).toBeDefined();
    });
});

En donde:

• Se importa React porque, si se fijan bien, utilizamos JSX dentro de test.
• Se importan configure y shallow desde enzyme porque, necesitamos configurar el adaptador para Enzyme y porque el shallow será la forma en que montaremos el componente.
• Se importa Adapter para que se puedan utilizar elementos de react 16 en el test.
• Se importa el componente a testear.
• El describe y el test tienen elementos parecidos a los del test anterior (el de la suma), pero dentro del test ésta vez se ocupa el shallow.

Aquí me detengo un momento, ya que hay algo que no hablé en la introducción de la historia pasada porque quizás la explicación podría ser muy abstracta en ese punto, y era mejor tener un ejemplo concreto.

Para testear un componente (independiente de que tipo) Enzyme lo “monta” dentro del test. Es decir, el componente vive en ese momento en el test tal como aparece en el código anterior. Este componente se puede montar de tres formas distintas:

• render: Es la forma mas liviana de poder montar un componente para testearlo. Solamente testeará lo que esté dentro dle método render y es ideal para componentes presentacionales.
• shallow: Es una forma intermedia de montar el componente. Es superficial, y solamente puede acceder a ciertos elementos del ciclo de vida de React.
• mount: Es la forma mas pesada de montar el componente, ya que ésta vez incluso podemos acceder al DOM y al total ciclo de vida de React.

En este caso de stateless component, podemos hacerlo con las tres formas, pero como estándar utilizaremos shallow en la medida que lo permita el componente.

Igualmente del test de la suma, uno “espera” algo del componente para comprobar que esté bien. Y tal como se mencionó anteriormente, existen múltiples formas de como poder testear ese componente. En este caso, simplemente preguntaremos si quedó definido preguntando si encuentra el componente, dentro del mismo componente que se montó.

Es una forma básica de testearlo, pero inquebrantable.

Esto es todo por ahora. En la próxima historia, se verán formas distintas de ocupar los matchers, ya que a veces se necesitan testear elementos específicos aún dentro de un componente ya montado. Veremos selectores, snapshots y algunos de los matchers mas utilizados, mientras seguimos avanzando con statefull component.

Hasta pronto!