Unit Testing eficaz en frontend

Explico desde mi experiencia la eficacia de múltiples herramientas de unit testing y la más completa

hace un año   •   3 min de lectura

Por Andrés Tuñón

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.

Un clásico: Internet Explorer/Safari dando problemas
Un clásico: Internet Explorer/Safari dando problemas

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

blog/02-running-jest-tests-in-a-browser.md at master · tom-sherman/blog
Tom Sherman’s writings and ramblings. Contribute to tom-sherman/blog development by creating an account on GitHub.
Storybook: UI component explorer for frontend developers
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

Corre la voz

Sigue leyendo