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.