Introducción
En el desarrollo de productos digitales enfocados en blockchain y tecnologías emergentes, uno de los mayores desafíos no es solo construir rápido, sino escalar con calidad.
A medida que los servicios evolucionan y aumentan en complejidad, también lo hacen las exigencias sobre el front-end: mayor estabilidad, mejor experiencia de usuario y una arquitectura capaz de sostener cambios constantes. En este contexto, fortalecer el entorno de testing deja de ser opcional y se convierte en un pilar estratégico.
En este artículo exploramos cómo definir directrices de prueba claras, construir una estrategia sólida y aplicar iniciativas prácticas que acompañen el crecimiento sostenible de productos tecnológicos.
Contexto del producto y necesidad de fortalecer las pruebas
Yakukyubin es un servicio desarrollado por MG-DX Co., Ltd. que apoya la transformación digital (DX) en el sector salud y farmacias. Permite funciones como:
- Envío anticipado de recetas
- Reservas en farmacias en línea
- Instrucciones de medicamentos en línea
El sistema utiliza un Monorepo para gestionar múltiples pantallas:
- Usuario
- Gestión de farmacia
- Gestión de clínica
- Gestión interna
Además, la personalización por cadena de farmacias genera especificaciones complejas.
El entorno inicial incluía:
- Pruebas snapshot
- Regresión visual
- Pruebas unitarias e integración mínimas
Sin embargo, a medida que el servicio creció, se hizo evidente la necesidad de fortalecer la estrategia de pruebas para garantizar estabilidad y productividad.
##Estrategia de prueba basada en Test Trophy
Tras revisar nuestra estrategia, decidimos adoptar el modelo de Test Trophy.
En lugar de equilibrar todos los tipos de pruebas por igual, priorizamos:
- Componentes y procesos de nivel medio
- Interacciones del usuario
- Comunicación con API
Reducimos:
- Pruebas de UI de bajo nivel
- Pruebas E2E extensivas
Este enfoque nos permite maximizar la efectividad con un esfuerzo razonable y mayor mantenibilidad.
Storybook como base del entorno de pruebas
Utilizamos Storybook para renderizar componentes y ejecutar pruebas de UI.
Objetivos principales:
- Desarrollo aislado sin depender del entorno externo
- Verificación en modo oscuro y claro
- Validaciones de accesibilidad
- Documentación viva del componente
Adoptamos:
- Formato CSF (Component Story Format)
- Estados estandarizados por historia:
- Básico
- Vacío
- Cargando
- Estados especiales
Además, utilizamos Scaffdog para generar plantillas automáticamente, asegurando consistencia y evitando omisiones.
Pruebas unitarias e integración con Vitest y reglas claras
Para pruebas unitarias e integración utilizamos Vitest.
Definimos roles claros para las pruebas:
- Resistencia a regresión
- Resistencia a refactorización
- Comprensión de especificaciones
Reglas principales:
- Patrón AAA (Arrange–Act–Assert)
- Nombres de pruebas en japonés
- Uso de consultas según prioridad recomendada por Testing Library
- Agrupación de referencias y acciones en funciones comunes
- Convención de nombres basada en estado y resultado
También implementamos:
- Programación Mob para escribir pruebas en equipo
- Reuniones periódicas de pruebas front-end
- Revisión y mejora continua de directrices
- Esto permitió compartir conocimientos, alinear criterios y fortalecer la cultura de calidad.
Recomendaciones
- Definir una estrategia clara antes de aumentar el volumen de pruebas.
- Priorizar pruebas que aporten mayor valor al producto.
- Estandarizar reglas de escritura para mantener coherencia.
- Utilizar herramientas como Storybook como base de documentación viva.
- Fomentar discusiones periódicas sobre pruebas dentro del equipo.
Conclusiones
- Fortalecer un entorno de pruebas no consiste solo en aumentar la cantidad de tests, sino en definir una estrategia alineada con el producto y el equipo.
- Al adoptar el modelo Test Trophy, estructurar directrices claras y fomentar prácticas colaborativas como la programación Mob, el equipo front-end de MG-DX ha avanzado hacia un equilibrio entre estabilidad del servicio y productividad del desarrollo.
- Aunque las directrices siguen evolucionando, este proceso ha establecido una base sólida para el crecimiento sostenible del producto.
Glosario
- Monorepo: Estrategia donde múltiples proyectos o aplicaciones comparten un único repositorio.
- Test Trophy: Modelo de estrategia de pruebas que prioriza pruebas de integración sobre unitarias o E2E masivas.
- Storybook: Herramienta para desarrollar y documentar componentes UI de forma aislada.
- Vitest: Framework de pruebas rápido para proyectos basados en JavaScript y Vite.
- Patrón AAA: Estructura de prueba basada en Organizar, Actuar y Afirmar.
