Como pequeña introducción, el unit testing es código que revisa otro código aislando "unidades".
Las unidades pueden ser clases, funciones, componentes u otros, eso lo defines tú. En frontend solemos probar componentes y suele ser un tanto complicado.
Importancia y Beneficios
- ¿Alguna vez has probado una librería random que te promete una funcionalidad y no sirve?
- ¿Alguna vez has dañado una funcionalidad que previamente implementaste hace mucho tiempo?
Si la respuesta fue sí, es hora de llevar tu código al siguiente nivel, es hora de entregar código de calidad, es hora de Unit Testing eficaz. A continuación te presento algunos beneficios:
Diseño del código y componentes "reusables"
Tan solo el pensar en que debes probar tu código, ayuda a reducir las dependencias y ver los edge cases; logras hacer un componente a prueba de balas. Tu código se vuelve más legible, reutilizable y bonito en general.
Documentación
Al crear pruebas unitarias para tus componentes, sabes como debe funcionar 3 años después. Las pruebas al estar orientadas al resultado, te ayudan a visualizar como debe comportarse el componente.
Cumples con los criterios de aceptación
Hay estrategias como TDD que priorizan las pruebas unitarias antes de la lógica, para asegurarte de cumplir con los criterios de aceptación de la funcionalidad. No es obligación, pero te ayuda a centrarte en lo que desea el cliente.
No es solo probar por probar
Hay veces que realizas pruebas unitarias, pero aún así salen "bugs" ¿Por qué será esto? Hay diversas razones; pero, en esta ocasión solo tocaré la compatibilidad con los navegadores y el resto quedará para un futuro:
Herramientas famosas
Hay veces que necesitas probar simple lógica y otras en las que debes asegurarte que realmente se va a ver bien para el usuario, me concentraré en este último:
En Angular se suele utilizar Karma/Jasmine y es muy robusto; ya que, levanta un navegador y prueba realmente como se ejecutaría en un navegador, sin embargo es lento.
En cambio Jest es muy rápido, pero no es tan robusto justamente por utilizar jsdom que no es un navegador real, es un emulador.
Existe la alternativa de utilizar pupeeter con Jest... ¿Pero que estás logrando? Lo mismo que Karma/Jasmine.
Estos son alternativas y dependen de lo que necesites, pero buscaba algo completo y esto me llevo a Storybook.
Storybook
Es una librería que aisla los componentes y los coloca sobre Stories, te ayuda a modificar facilmente los props con sus controles (visualmente), puedes documentar y realizar todo tipo de pruebas.
Mientras que puedes considerar múltiples navegadores al abrir las stories; puedes probar visualmente los edge cases y el resto de los estados visuales. Incluso puedes mostrarle esto a tu cliente y diseñador para llegar a un concenso.
Esta es la librería más completa que he conocido para el frontend, muy recomendada.
Referencias
tom-sherman
Brad FrostAuthor of Atomic Design
