Back to Visual Testing Handbook
React
Chapters
  • Introducción
  • Exploradores de componentes
  • Flujo de trabajo
  • TDD Visual
  • Automatizar
  • Conclusión

Conclusión

Di adiós a los errores visuales
Esta traducción de la comunidad aún no se ha actualizado a la última versión de Storybook. Ayúdanos a actualizarlo aplicando los cambios en la guía en español para esta traducción. Pull requests son bienvenidos.

Los desarrolladores dedican el 21% de su tiempo a corregir errores. Depurar la apariencia de la interfaz de usuario puede resultar especialmente frustrante. Las reproducciones requieren que inicie diferentes navegadores, coloque su aplicación en el estado correcto y avance penosamente por el DOM. Lo que está en juego también es mayor; los errores no detectados cuestan 5-10x más tiempo para corregirlos en producción que en QA.

Es de sentido común que miles de equipos de frontend realicen pruebas visuales con Storybook. Storybook te ayuda a construir componentes y escribir pruebas visuales. La ejecución de pruebas a nivel de componente te permite identificar la causa raíz de un error. Tomar instantáneas te ayuda a detectar regresiones automáticamente. Eso significa que la gente puede enviar interfaces de usuario sin preocuparse por los errores polizones.

Esta guía te presentó los conceptos básicos de las pruebas visuales. Tom y yo esperamos que puedan aprovechar estos aprendizajes en sus propios proyectos. Únase a la lista de correo de Storybook para recibir notificaciones sobre más artículos y guías útiles como este.

Código de muestra para este tutorial

Si lo ha estado siguiendo, su repositorio y Storybook implementado deberían verse así:

Más recursos

¿Quieres sumergirte más profundo? A continuación, se incluyen algunos recursos útiles adicionales:

Is this free guide helping you? Tweet to give kudos and help other devs find it.
✍️ Edit on GitHub – PRs welcome!
Join the community
6,614 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI