Cómo configurar React Testing Library

React Testing Library que nos permite hacer tests de nuestros componentes de React chequeando el DOM en vez de chequear nuestras props o state cómo haríamos con enzyme.

Instalación de nuestro proyecto de React

Con npx podemos crear un proyecto de react atacando al instalador global de create-react-app y crear nuestro proyecto

  npx create-react-app configure-react-testing-library

A continuación podemos instalar los siguientes paquetes para usar react-testing-library.

  npm i --save-dev react-testing-library jest-dom

Después de que nos instale estos paquetes dentro de la carpeta src, creamos el archivo setupTests.js y dentro escribiremos los siguiente

// se añaden ciertos matchers del DOM a nuestro expect de jest
import "jest-dom/extend-expect";
// resetea nuestros componentes por cada test para que empiecen desde 0
import "react-testing-library/cleanup-after-each";

Hagamos nuestros primeros tests

En el archivo App.test.js lo editaremos de la siguiente forma añadiendole 2 tests.

El primer test se encargará de renderizar nuestro componente y que se renderice correctamente.

Mientras que el segundo comprobará que el elemento link tenga el texto "Learn React"

import React from "react";
import { render } from "react-testing-library";
import App from "./App";

it("renders without crashing", () => {
    const {container} = render(<App />);
    expect(container.outerHTML).not.toBeUndefined();
});

it("the link text should be Learn React", () => {
    const {container} = render(<App />);
    expect(container.querySelector("a")).toHaveTextContent("Learn React");
});

it("the link text should have the right href", () => {
    const {container} = render(<App />);
    expect(container.querySelector("a")).toHaveAttribute('href','https://reactjs.org');
});

Resumen

En poco tiempo hemos configurado nuestra aplicación con react-testing-library, no nos tenemos que preocupar de configurar un adapter porque con cualquier versión de React funciona nuestra librería y no hay que olvidarse que a día de hoy nos deja testear los hooks de React.

Os dejo el repo en el siguiente enlace: Repo