狠狠撸

Unit Test
React js + Jest
/gabrielcomas

?Qué es Unit Test y para que sirve?
Es lo que permite llevar un control, a menor escala,
de los componentes para que estos cumplan con
nuestras expectativas.
CLICK ME
Resultado final:
Click Me
Expectativa:

Beneficios
Nuestro código cumple un standard.
Ocurren menos errores en la etapa de producción.
Genera confianza a la hora de programar.

Jest
Framework de Unit Testing
https://jestjs.io/docs/en/getting-started.html

Características de Jest
// No necesita demasiada configuración adicional.
// Tests UI de forma rápida y ágil.
// Pruebas individuales, pueden isolarse.
// Genera reportes del porcentaje de la app testeada.
// Posee gran cantidad de documentación.
// Cuenta con una comunidad activa.

Instalación y configuración
// Buenas prácticas
Cada componente debe tener su carpeta __test__
Todos los archivos de test debe tener la siguiente estructura
// ejemplo.test.js
npm install --save-dev jest
"scripts": {
"test": "jest --verbose"
},
npm run test
// package.json

Estructura
test("Descripción del test", () => {
expect(elemento a testear).verbo()
})
test("It should has React", () => {
const frameworks = ["React", "Vue", "Angular",
"Svelte"];
expect(frameworks).toContain("React"); });
// Ejemplo

// Test arrays
const frameworks = ["React", "Vue", "Angular", "Svelte"];
expect(frameworks).toContain("React"); });
// Test numbers
test("It should be greater than", () => {
expect(10).toBeGreaterThan(9); });
// Test Booleans
test("It should be true", () => { expect(true).toBeTruthy(); });
// Reverse strings function
const reverseString = (str, cb) => {
cb(str.split("").reverse().join("")); };
// Test callbacks
test("The callback should return a reversed word", () => {
reverseString("Platzi", str => { expect(str).toBe("iztalP"); }); });

Describe – Agrupar tests
describe("Test group", () => {
const frameworks = ["React", "Vue",
"Angular", "Svelte"];
expect(frameworks).toContain("React");
});
test("It should be greater than", () => {
expect(10).toBeGreaterThan(9);
});
});

Test individual
// Correr el test de un archivo en particular
// package.json
Watch
// Escucha los test y los ejecuta cuando ocurre un cambio en los mismos
"scripts": {
"test": "jest --verbose",
"test:watch": "jest --watch"
},
npm run test:watch
npm install -g jest
jest src/__test__/index.test.js

jest --coverage
Coverage
// Reporte de tests
//coverage/Icov-report/index.html

npm install --save-dev enzyme
Enzyme
Librería Airbnb
npm install --save-dev enzyme-adapter-react-16 //React Versión 16
npm install --save-dev jsdom jsdom-global

?Qué ofrece Enzyme?
Mount() Shallow()
Realiza un render en el DOM
del componente.
Permitiéndonos testear
interacciones del usuario
(eventos).
Solo necesitas algo
particular del componente.
Al no necesitar el DOM,
el test es rápido.

Configuración
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
// setupTest.js
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/src/__test__/setupTest.js"
]
}
// package.json

Mocks
Funciones que simulan acciones

Mocks - Estilos
module.exports = {}
//__Mocks__/styleMock.js
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/src/__test__/setupTest.js"
],
"moduleNameMapper": {
".(css)$": "<rootDir>/src/__mocks__/styleMock.js"
}
}
// package.json

Mocks - Provider
import React from 'react';
import { createStore } from 'redux';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import initialState from '../initialState';
import reducer from '../reducers';
const store = createStore(reducer, initialState);
const history = createBrowserHistory();
const ProviderMock = props => (
<Provider store={store}>
<Router history={history}>
{ props.children }
</Router>
</Provider>
);
export default ProviderMock;
//__Mocks__/providerMock.js

Caso de uso - Mocks Provider
describe('<Header/>', () => {
test('render del componente Header', () => {
const header = shallow(
<ProviderMocks>
<Header />
</ProviderMocks>
);
expect(header.length).toEqual(1);
});
test('Render del titulo', () => {
const header = mount(
<ProviderMocks>
<Header />
</ProviderMocks>
);
expect(header.find('.Header-title').text()).toEqual('Mi título');
});
});

npm install --save-dev react-test-renderer
Snapshot
UI Test

?Cómo se utiliza?
import { create } from 'react-test-renderer';
describe('<Footer/>', () => {
test('Footer UI', () => {
const footer = create(<Footer />);
expect(footer.toJSON()).toMatchSnapshot();
});
});
JSON
"scripts": {
"test:update": "jest --updateSnapshot",
},
npm run test:update
// package.json

Otros Tests
Redux: Acciones y Reducers
Peticiones Fetch

import actions from '../../actions/';
import ProductMock from '../../__mocks__/ProductMock';
describe('Actions', () => {
const payload = ProductMock;
test('addToCart Action', () => {
const expected = {
type: 'ADD_TO_CART',
payload,
};
expect(actions.addToCart(payload)).toEqual(expected);
});
test('removeFromCart', () => {
const expected = {
type: 'REMOVE_FROM_CART',
payload,
};
expect(actions.removeFromCart(payload)).toEqual(expected);
});
});
Acciones

import reducer from '../../reducers';
import ProductMock from '../../__mocks__/ProductMock';
describe('Reducers', () => {
test('Retornar initial State', () => {
expect(reducer({}, '')).toEqual({});
});
test('ADD_TO_CART', () => {
const initialState = {
cart: [],
};
const payload = ProductMock;
const action = {
type: 'ADD_TO_CART',
payload,
};
const expected = {
cart: [
ProductMock,
],
};
expect(reducer(initialState, action)).toEqual(expected);
});
});
Reducers

Fetch
npm install --save-dev jest-fetch-mock
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
global.fetch = require('fetch-jest-mock')
// setupTest.js
const getData = (api) => {
return fetch(api)
.then(response => response.json())
.then(response => response)
.catch(error => error);
};
export default getData;
// src/utils/getData.js

import getData from '../../utils/getData';
describe('Fetch API', () => {
beforeEach(() => {
fetch.resetMocks();
});
test('Llamar una API y retornar datos', () => {
fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
getData('https://google.com').then((response) => {
expect(response.data).toEqual('12345');
done();
});
expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
});
});
// src/utils/getData.test.js

?Muchas Gracias!
/gabrielcomas

狠狠撸

Unit Testing con Jest + Enzime para ReactJs

Recommended

More Related Content

What's hot (6)

Unit Testing con Jest + Enzime para ReactJs

Editor's Notes