Cómo configurar Jest y Enzyme para probar las aplicaciones React Native

Este breve artículo comparte mis experiencias al configurar mi entorno de prueba para realizar pruebas unitarias de componentes React Native con Jest y Enzyme.

Herramientas de prueba y entorno

Lo primero que aprendí fue que el enfoque y la infraestructura para escribir pruebas unitarias para una aplicación React Native son muy similares a escribir pruebas unitarias para una aplicación React ... quizás como era de esperar.

Sin embargo, si bien las herramientas y el uso de los conjuntos de pruebas son muy similares, el entorno de prueba y la infraestructura deben configurarse de una manera ligeramente diferente . Esto se debe esencialmente a que las aplicaciones React están diseñadas para funcionar con el DOM dentro de un navegador, mientras que las aplicaciones móviles no apuntan a esta estructura de datos para la renderización (se dirigen a módulos 'nativos' reales que están en el sistema móvil).

Usando Jest

Jest es una biblioteca utilizada para probar aplicaciones JavaScript.

Quería usar Jest por varias razones:

En primer lugar, Facebook lo creó y lo mantiene activamente para sus propias aplicaciones React Native.

En segundo lugar, viene empaquetado con la versión de React Native con la que estaba trabajando (creado usando react-native).

En tercer lugar, Jest es un marco de prueba "completo" y contiene todo el conjunto de herramientas de prueba que necesitaba. Por ejemplo, Jest viene con una biblioteca para verificar afirmaciones, un ejecutor de pruebas para ejecutar pruebas y herramientas para verificar la cobertura del código. Con otras soluciones, uno tiene que elegir y ensamblar componentes individuales de una suite de pruebas.

Usando Jest + Enzyme

Quería combinar Jest y Enzyme. Hay muchos comentarios un poco confusos en la web que comparan 'Jest versus Enzyme'. Esto es un poco engañoso. Si bien Jest es un marco de prueba, puede pensar en Enzyme como una biblioteca que facilita la selección y consulta de elementos dentro de un DOM emulado. Por lo tanto , a menudo se usa junto con Jest para que la escritura de la lógica de las pruebas sea más limpia y fácil de leer.

¿Sigo confundido? Es similar a cómo jQuery introdujo una sintaxis concisa y clara para consultar y seleccionar elementos en el DOM, mientras que la sintaxis que usaba JavaScript vanilla (al menos cuando se introdujo por primera vez jQuery) no era tan clara y fácil de usar. Y la gente no suele comparar 'jQuery versus JavaScript', a menos que estén comparando una forma particular que usan los dos enfoques para consultar y modificar elementos del DOM.

Nota: puede usar Jest sin Enzyme (creo que Facebook hace esto) pero Enzyme hace que sus pruebas sean un poco más fáciles de crear y leer. Desde mi perspectiva, combinar Enzyme con Jest se trata de conveniencia.

Configuración de Jest + Enzyme

Tuve que pasar por algunos obstáculos para configurar con éxito Jest y Enzyme en mi entorno React Native.

Jest ahora viene incluido con las aplicaciones React Native creadas con la herramienta 'react-native'. Así que podría usar Jest fuera de la caja. ¡Maravilloso!

Pero encontré algunos problemas al intentar combinar Enzyme con React Native usando su documentación. Nunca llegué al fondo de cuál era el problema subyacente, pero seguía recibiendo errores de 'módulos no encontrados' como este aquí.

Una solución

Al final, utilicé una solución que esencialmente abstrae parte de la configuración en un entorno preempaquetado usando la biblioteca jest-enzima y luego me aseguré de que los 'presets' de jest estuvieran configurados como 'react-native' en mi package.json.

Seguí las instrucciones para instalar estas bibliotecas:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

Los errores cuando intenté ejecutar mis pruebas también me dirigieron a instalarlos explícitamente yo también:

npm install --save-dev react-dom enzyme

Esto es lo que tuve que agregar manualmente a package.json:

// package.json before with react-native init { ... "jest": { "presets": ["react-native"], } ... } // package.json after my manual changes: { ... "jest": { "presets": ["react-native"], // not clear in documentation! "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" } } ... }

Puedes ver el repositorio aquí.

Usar la biblioteca jest-enzima de esta manera funcionó fácilmente para mí y también significó que tenía una configuración un poco más limpia. Esto se debe a que el otro enfoque (que no pude ponerme a trabajar, siguiendo la documentación de Enzyme) habría significado que también tuve que configurar y mantener un script 'jest config' separado.

Resumen

Escribir la lógica empresarial dentro de las pruebas Jest + Enzyme para React Native parece ser exactamente lo mismo que escribir pruebas para React usando Jest + Enzyme. Esto significa que los ejemplos y la documentación en línea para las pruebas unitarias de React son fácilmente transferibles, lo cual es realmente útil. Este es un gran paso hacia la visión de que los desarrolladores web puedan transferir fácilmente sus habilidades para crear aplicaciones móviles multiplataforma.

Sin embargo, por la facilidad de uso en la fase de 'escritura de prueba', pagué el precio al configurar la infraestructura y el entorno para que las diversas herramientas fueran compatibles con mi ecosistema React Native.

Además, al encontrar problemas de Github en esta área, parece que hay muchas pequeñas inestabilidades entre las versiones de React Native que hacen que sea realmente difícil descubrir cuál es la causa subyacente de un problema de infraestructura como los que describí anteriormente. Pero supongo que no podemos tener flexibilidad en un espacio tan dinámico como este sin algunos desafíos.

Aquí está el repositorio con mi configuración de enzima jest con algunas pruebas de ejemplo.

¡Espero que hayas encontrado esto interesante y útil! No dude en agregar cualquier pregunta o comentario a continuación.