¿Cómo testear?

Existen en la actualidad varios tipos de librerías para testear componentes en React.

Jest

Jest un entorno de ejecución para pruebas ya viene integrado con create-react-app de cajón, decimos que es un entorno de ejecución ya que provee funciones que nosotros no estamos importando por ejemplo las keywords describe, test, it, expect entre otras.

Beneficios

• Paraleliza las tasks para ser más performante.

• Permite obtener el coverage del código.

• Fácil integración.

Los archivos de test tienen que tener la extension .test.js o .spec.js

Jest

API

expect(...)

Función que permite acceder a varios matchers que permiten validar diferentes cosas

1. toEqual Verifica cada property del objeto o array. 2. toBeNull Verifica que sea nulo. 3. toBeUndefined Verifica que sea undefined. 6. toContain Verifica si contiene un item particular en un array.

Ejemplo

const splitContent = content => content.split(',');

//En el caso de ser código async, utilizar async en el arrow function
describe('Test example', () => {
    test('Should split the content ', () => {
        const content = 'Prueba,de,ejemplo,para,meli';
        const response = ['Prueba', 'de', 'ejemplo', 'para', 'meli'];
        const result = splitContent(content);
        expect(result).toEqual(response);
        expect(result).toHaveLength(5);
    });
});

React-Test-Render

Es una librería para componentes React, que permite montar el componente y realizar assertions para validar, no es un mount real, es una instancia virtual del componente.

Test Renderer – React

Ejemplo Unit

import React from "react";
import { create } from "react-test-renderer";

const Button = ({title}) => <button>{title}</button>;

describe("Button component", () => {
  test("Snapshot", () => {
    const button = create(<Button title="Prueba" />);
    expect(button.toJSON()).toMatchSnapshot();
  });
});

Ejemplo Funcional

import React, { useState } from "react";
import { create } from "react-test-renderer";

const Button = ({title}) => {
    const [ text, setText ] = useState("");
    return <button onClick={() => setText('Activo')}>{text || title}</button>;
}

describe("Button component", () => {
  test("it shows the expected text when clicked", () => {
    const component = create(<Button text="Inactivo" />);
    const instance = component.root;
    const button = instance.findByType("button");
    button.props.onClick();
    expect(button.props.children).toBe("Activo");
  });
});

Enzyme

Enzyme es una librería para testear componentes de React , permite manipular de manera rápida los mismos.

Airbnb Engineering & Data Science

Render | Shallow | Mount

Existen 3 maneras de renderizar un componente dentro de Enzyme, las 3 son buenas dependiendo lo que tengamos que hacer.

1. Shallow: Para testear componentes como unidad sin lifecycle.

2. Mount: Para testear componentes con lifecycle (utiliza la API DOM, para render)

3. Render: Permite testear la estructura de HTML.

Ejemplo Unit

import React from "react";
import { shallow } from "enzyme";

const Button = ({title}) => <button>{title}</button>;

describe("Button component", () => {
  test("Snapshot", () => {
   	const button = shallow(<Button title="Prueba" />);
  	expect(button).toMatchSnapshot();
  });
});

Ejemplo Funcional

import React,  { useState } from 'react';
import { shallow } from 'enzyme';

const Button = ({title}) => {
    const [ text, setText ] = useState("");
    return <button onClick={() => setText('Activo')}>{text || title}</button>;
}

describe('Button component',() => {
    test('it shows the expected text when clicked',() => {
        const button = shallow(<Button title="Inactivo" />);
        button.find('button').simulate('click');
        expect(button.find('button').text()).toEqual('Activo');
    });
});

Nightwatch

Nightwatch.js es un framework de testing e2e para aplicaciones Web, escrito en Node.js.

Nightwatch.js | Node.js powered End-to-End testing frameworknightwatchjs

Los test de integración como vimos anteriormente son los mas complejos ya que abarcan todo un flujo que queremos verificar, son los mas potentes ya que permiten comprobar la experiencia de un user entera, usando Nightwatch es mucho más fácil.

Nightwatch VRT

Es una extensión para nightwatch que permite tomar un screenshot del DOM para comprobarlo contra una versión anterior para verificar si cambió, la misma idea que el snapshot que venimos usando.

Existen varios frameworks e2e se muestra este ya que es el más utilizando dentro de meli