Ejemplo de prueba de React con Jest

Para realizar pruebas automatizadas de las aplicaciones escritas con javascript es posible utilizar Jest. Jest tiene entre otras , una librería específica para probar componentes de React.

Aquí se describe una app realizada con React. Esta App tiene un único componente que dispone de una prueba automatizada realizada con Jest.

El código se puede descargar en https://github.com/MarisaAfuera/app-react-with-test 

Pasos seguidos para la realizar el ejemplo

1. Crear la app React con el comando ´npx create-react-app app-react-with-test`

2. Modificar el fichero app.js para que haga uso del componente CheckboxWithLabel.js. El fichero app.js queda con el siguiente contenido:

3. Copiar el componente CheckboxWithLabel.js y su fichero de prueba CheckboxWithLabel.Test.js que están en https://jestjs.io/docs/en/tutorial-react. El fichero de prueba se almacena en el directorio /tests, para aislar las pruebas de los fuentes de la aplicación. 

4. Se crea el fichero jest.config.js para indicar a Jest donde están los ficheros de prueba. Para que Jest utilice este fichero de configuración se modifica package.json, indicando donde está el fichero de configuración cuando se ejecute el script test.

4. Añadir la librería react-test-renderer para renderizar instantaneas de React con el comando: ´yarn add --dev react-test-renderer´

5.  Para eliminar el error `Jest encountered an unexpected token`

    5.1 Instalar `npm install --save-dev @babel/preset-react`

    5.2 Crear el fichero .babelrc con el contenido

    5.3 Instalar el módulo ´transform-es2015-modules-comonjs´ con el comando ´npm install --save-dev babel-plugin-transform-es2015-modules-commonjs´     

Terminando

Esto es todo.  Las versiones de las librerías utilizadas se pueden consultar en el archivo package.json de https://github.com/MarisaAfuera/app-react-with-test 

Espero que esto sirva de ayuda a algún programador.