Workspace recomendado para Testing en React 17 | Jest + Enzyme 🧪

#react #jest #testing #spanish

En este breve post ire directo al grano y describiré como configurar un proyecto de React 17 para realizar unit testing usando Jest. Ojo, es solo una recomendación, nada mas que eso.

Configuración básica

Creamos un proyecto con create-react-app
Instalamos Enzyme una libreria que se ejecuta sobre Jest y que permite escribir pruebas mas simples. Se recomienda instalar la versión de Enzyme acorde a la versión de React del proyecto, ya que React va por la versión 17 entonces instalaremos Enzyme 17 Puedes ejecutar el siguiente comando el el root del proyecto:

npm install --save-dev @wojtekmaj/enzyme-adapter-react-17

Ya que Jest esta orientado a hacer pruebas usando snapshots una dependencia para poder ver dichos spanshots como strings en el proyecto es enzyme-to-json Puedes instalarlo asi:

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

En el archivo setupTest.js pegamos la siguiente config:

import {createSerializer} from 'enzyme-to-json';

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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

Para probar todo el entorno montado:
Creo un componente sencillo, por ejemplo Header.js

import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header titulo={'Buenos dias'} />
    </div>
  );
}

export default App;

Y ahora una prueba básica:

import React from 'react';
import {shallow} from 'enzyme';
import '@testing-library/jest-dom'
import Header from '../components/Header';

describe('Pruebas en <Header />', () => {
    test('<Header /> se renderiza bien', () => {
        const titulo = 'Buenos días';
        const jsxHeader = shallow(<Header titulo={titulo}/>);
        expect(jsxHeader).toMatchSnapshot();
    })

});