Obtenga su paquete de NPM cubierto con Jest y Codecov ☂️

Introducción

Hablemos sobre la cobertura del código y cómo puede hacer informes de cobertura en Jest y Codecov.

¿Qué es la cobertura de código?

Si está familiarizado con testing. Conoces su propósito principal:

Las pruebas dan a los desarrolladores la libertad de realizar cambios y refactorizar el código con la confianza de que todo debería funcionar bien siempre y cuando todas las pruebas automatizadas pasen.

Sin embargo, si las pruebas unitarias no cubren todos los escenarios, aún existe la posibilidad de que sus cambios puedan romper algo. Es por eso que tenemos cobertura de código: la medida de cuánto de la base de código está cubierta por pruebas automatizadas.

Sin el análisis de cobertura de código, sus pruebas han perdido su propósito principal.

Esto es importante cuando su proyecto crece y participan muchos desarrolladores.

✅ Podemos mantener la calidad de nuestra prueba cuando se agrega un nuevo código.

✅ Obtenemos una comprensión más profunda de las pruebas existentes.

✅ Brinde a los desarrolladores confianza para refactorizar el código sin preocuparse por romper cosas.

✅ Podemos detectar flujos no probados antes de que causen problemas.

Bien, ahora que sabemos qué es la cobertura de código, ¡implementémoslo! ?

Prerrequisitos

Para que este artículo sea breve y conciso, comenzaré aquí: Creación y publicación paso a paso y Paquete Mecanografiado de NPM.

Qué se ha hecho hasta ahora:

✅ Configurar un paquete NPM básico

✅ Agregue pruebas con Jest

✅ Escribe una prueba básica

Si ya tiene su proyecto configurado con Jest, está listo para comenzar. ? De lo contrario, le recomiendo que clone o bifurque el repositorio de este artículo para comenzar desde una base básica de paquete NPM:

git clone [email protected]:caki0915/my-awesome-greeter.git && cd my-awesome-greeter &&git checkout basic-package && npm install

Si está interesado en cómo crear paquetes de NPM, le recomiendo mi artículo anterior aquí.

Muy bien, ahora que todo está configurado, ¡vamos!

Crea informes de cobertura en Jest

Crear informes de cobertura en Jest es fácil. Simplemente agregue esta línea en su archivo de configuración de broma:

"collectCoverage":true

collectCoverage: debe establecerse en true si desea que Jest recopile información de cobertura mientras realiza sus pruebas. (Las pruebas se ejecutarán un poco más lentamente, por lo que es falso de forma predeterminada).

Asegúrese de que su comando de secuencia de comandos testen su archivo package.json ejecutará Jest con su archivo de configuración.

“test”: “jest --config jestconfig.json”

¡Bien! corrernpm testen tu terminal, y ¡voilà! Tendrá una nueva carpeta con archivos de cobertura de código generados para usted.

No olvide agregar la carpeta de cobertura a .gitignore. No queremos archivos de compilación en nuestro repositorio. ?

Haga algo útil de sus informes

Ok, eso está bien, generamos una carpeta con algunos archivos, pero ¿qué debemos hacer con esta información? ?

En primer lugar, puede revisar manualmente el informe de cobertura en una página HTML generada. Abra /coverage/lcov-report/index.htmlen su navegador:

Ok, eso es bueno, pero ¿REALMENTE necesitamos revisar manualmente los informes en cada compilación?

No, no deberías. Debería publicar los informes en línea para hacer algo útil con ellos. En este artículo, usaremos una herramienta de informes de cobertura llamada codecov.io.

Codecov es gratuito para proyectos de código abierto. Lleva los informes de cobertura de código al siguiente nivel. Con Codecov, también podemos generar automáticamente insignias y ejecutarlas en compilaciones de integración continua. (Más sobre esto más adelante).

Regístrese en //codecov.io/ y siga la guía para conectarse a Github y su repositorio. Después de eso, debería terminar viendo una pantalla como esta:

¡Agradable! Por ahora, esta página estará vacía porque aún no ha subido ningún informe, así que solucionemos eso. En la terminal, ejecuta:

npm install --save-dev codecov

Normalmente, desea cargar informes al final de una compilación de integración continua, pero para este artículo, cargaremos los informes desde nuestra máquina local. En la terminal ejecutar:

(Reemplace con su token de repositorio que se encuentra en el códec ov.io)

./node_modules/.bin/codecov --token=""

¡Éxito! Ahora puede ver su informe en línea en codecov.io. ?

//codecov.io/gh///

Agregue una insignia a su archivo README.md

Las insignias son importantes, especialmente para los paquetes de NPM. Da la primera impresión de alta calidad cuando ve una hermosa insignia de cobertura de código en npmjs y Github.

En su README.md agregue la siguiente línea:

(Replace , and with your information)

[![Codecov Coverage](//img.shields.io/codecov/c/github///
    
     .svg?style=flat-square)](//codecov.io/gh///)
    

In my case, it will look like this:

[![Codecov Coverage](//img.shields.io/codecov/c/github/caki0915/my-awesome-greeter/coverage.svg?style=flat-square)](//codecov.io/gh/caki0915/my-awesome-greeter/)

Awesome! Now you can show the rest of the world that you are using unit-testing and code coverage reports! ? ?

Summary

If you’re using tests, code coverage reporting is a must and it should run every-time you make a pull-request or make changes on your branches.

You can find my NPM-starter package here on Github.

It’s an educational base for best practices NPM-package development. Comments, Forks and PR’s are welcome. ?

What’s next?

If you don’t use continuous integration (CI) yet, it’s time to set it up.

In my next article, I’m going to cover continuous integration with code-coverage for NPM packages.

If you find this article useful, please give it some claps and follow me for more articles about development.

Good luck building your awesome package! ? ?