Unit Testing - Configuraciones Iniciales Enzyme - Cheatsheet

testingReactEnzyme.md

Configuraciones Iniciales Enzyme - Unit Testing

• Instalamos Enzyme:

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

• Instalamos Enzyme-To-JSON:

npm install --save-dev enzyme-to-json

• Para probar Hooks instalamos:

npm install --save-dev @testing-library/react-hooks

• En el archivo setupTest.js copiamos la configuración:

// setup file enzyme
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { createSerializer } from "enzyme-to-json";

configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(createSerializer({ mode: "deep" }));

Importar lo necesario

import React from "react";
import { shallow } from "enzyme";
import "@testing-library/jest-dom";
// import Ejemplo from "../../components/Ejemplo"; Importamos el componente a testear.

Creamos el wrapper + Snapshot

const wrapper = shallow(<Ejemplo />);

expect(wrapper).toMatchSnapshot();

Buscar ELEMENTOS

Utilizamos wrapper.find("elemento"). .find funciona como querySelector.

• Podemos buscar por clases: .find(".elemento").
• Podemos buscar por id: .find("#elemento").

Simular EVENTOS

Lo hacemos utilizando .simulate.

input.simulate("click/change/etc");

• Si se tiene que usar por ejemplo e.target.value en las pruebas se envía de esta forma:

input.simulate("change", { target: { value } });

• Si se tiene que usar por ejemplo e.preventDefault() en las pruebas se envía de esta forma:

wrapper.find("form").simulate("submit", { preventDefault() {} });

Testing en Hooks

• Importamos lo necesario:

import { renderHook, act } from "@testing-library/react-hooks";
import "@testing-library/jest-dom";
import useEjemplo from "../../hooks/useEjemplo"; //Importamos el hook a testear

• Utilizamos renderHook para trabajar con nuestro Hook:

const { result } = renderHook(() => useEjemplo());

• Utilizamos act para poder ejecutar las funciones de nuestro Hook:

const { increment } = result.current;

act(() => {
  increment(); //Se llama a la función increment();
});

• En el caso de probar un hook que realice una llamada a una API, utilizamos async-await por lo cual debemos usar tambien waitForNextUpdate(). Ejemplo: