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.

 

   

Ejemplo XmlHttpRequest

El ejemplo muestra como una página html hace mediante javascript una petición XMLHttpRequest para comprobar si existe o no un usuario en el servidor. El usuario se consulta en un API mediante punto de entrada. Por ejemplo: http://localhost:3000/users?name=Pedro para comprobar si en el servidor existe el usuario Pedro. En el caso de que exista se muestra un mensaje "Valid User Id" y en caso de que no exista se muestra "Invalid User Id".

La petición al API se envía mediante XmlHttpRequest de forma asincrona y cuando se recibe la respuesta se refresca solo el mensaje en la página, no la página completa.

pagina.html

onClick del botón Validar utiliza la función "validateUserId()" que hace una llamada asincrona al servidor. Tiene además un "return false" para que al hacer click no se refresque la página html completa, solo se refresca el mensaje con la función "setMessageUsingDOM(message)".

ejemploXHR.js

Este fichero contiene las funciones que crean y hacen uso de un objeto XmlHttpRequest para solicitar datos del servidor. Para ello:

1. Define una variable global.

2. Funciones validateUserID() y ajaxFunction(). Crean el objeto de tipo XmlHttpRequest, lo configuran y hacen la petición al servidor.

3. Función processRequest(). Esta función se ejecuta cada vez que el objeto XMLHttpRequest cambia de estado. Cuando alcanza el estado 4, la petición ha sido respondida desde el servidor.

4. Función setMessageUsingDOM(message). Muestra un mensaje en la pantalla dependiendo del valor de "message". True el usuario existe, false no existe.

db.json

Este componente contiene los usuarios que existen en el servidor. El servidor se ha suplantado(mockeado) con json-server. Para instalarlo ejecutar el comando "npm install -g json-server". Para arrancar el servidor ejecutar el comando "json-server --watch db.json". Si todo ha ido bien ya se puede abrir en el navegador "http://localhost:3000/users" y se verán los usuarios existentes.

Todo listo

Llegados aquí se puede abrir pagina.html en el navegador y probar la página html. Si quieres obtener el código completo https://github.com/MarisaAfuera/XmlHttpRequest.