DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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'}))

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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();
    })

});
Enter fullscreen mode Exit fullscreen mode

Finalmente ejecuto las pruebas con npm run test y listo!

Pasa la prueba, lo que significa que todo el workspace esta bien.

Top comments (2)

Collapse
 
cecheverri4 profile image
Cristian Echeverria

Buen aporte!

Recomiendo también React Testing Library lo cual desde mi punto de vista es simplemente genial!

Collapse
 
duxtech profile image
Cristian Fernando

Cierto, pero cuando el proyecto crece creo que es mejor usar Enzyme, es más divertido hacer pruebas xd