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();
})
});
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)
Buen aporte!
Recomiendo también React Testing Library lo cual desde mi punto de vista es simplemente genial!
Cierto, pero cuando el proyecto crece creo que es mejor usar Enzyme, es más divertido hacer pruebas xd