Unit Testing - Configuraciones Iniciales Enzyme - Cheatsheet Testing React

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 setupTests.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.

shallow es el que se utiliza generalmente. Pero cuando necesitamos más información y acceder más internamente porque hay otros componentes, se utiliza mount (permite testear interacciones del usuario -eventos-). Tambien se importa desde "enzyme.

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: "Aprender React",
		name: "description" // <-- valor del atributo NAME del input
	} 
});

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

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

Otra forma de simular eventos

wrapper.find("button").prop("onClick")();

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:

Probar cosas del Router

Debemos utilizar <MemoryRouter y rodear nuestro componente.

<MemoryRouter>
	<Navbar />
</MemoryRouter>

Testing en REDUX

• Instalamos redux-mock-store:

npm install redux-mock-store --save-dev

• Importamos lo necesario:

import configureStore from "redux-mock-store";
import thunk from "redux-thunk";

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

• Ejemplo de nuestro STORE:

const store = mockStore({
	auth: {
		uid: "123456",
	},
});

• Disparar acciones se realiza de esta forma:

store.dispatch(startUploading(file));

• Y para obtener los resultados de esas acciones disparadas se utiliza getActions():

const actions = store.getActions();