Pruebas de Storybook y regresión visual
Ejecute funciones play para pruebas de interacción e integre Chromatic para comparar diferencias visuales.
Pruebas de Storybook y regresión visual es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Por qué probar en Storybook?
Storybook 7 y versiones posteriores incluye @storybook/test para realizar pruebas de interacción (funciones play) y se integra con Chromatic para automatizar las pruebas de regresión visual, todo sin salir del explorador de componentes.
Funciones play
Una función play se ejecuta después de renderizar la story y simula interacciones del usuario mediante las utilidades de @storybook/test. Los resultados aparecen en el panel Interactions.
import { within, userEvent, expect } from '@storybook/test';
export const FilledForm: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByLabelText('Email'), 'test@example.com');
await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
await expect(canvas.getByText('Success!')).toBeInTheDocument();
},
};Aserciones en funciones play
Use expect de @storybook/test (reexportado desde Vitest/Jest) dentro de las funciones play para comprobar el estado del componente después de las interacciones.
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const button = canvas.getByRole('button', { name: /add/i });
await userEvent.click(button);
await expect(canvas.getByText('1 item')).toBeInTheDocument();
await userEvent.click(button);
await expect(canvas.getByText('2 items')).toBeInTheDocument();
},Ejecución de pruebas de stories con Storybook Test Runner
El paquete @storybook/test-runner convierte cada story que contiene una función play en una prueba de Jest. Ejecútelas en CI con un solo comando.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybook¿Qué son las pruebas de regresión visual?
Las pruebas de regresión visual capturan las pantallas de los componentes y detectan diferencias a nivel de píxel entre commits. Chromatic, Playwright y Percy son herramientas populares.
Configuración de Chromatic
Chromatic es el servicio oficial en la nube de Storybook para pruebas visuales. Publique sus stories y Chromatic comparará las capturas de pantalla con la línea base anterior.
# Install
npm install chromatic --save-dev
# Run (get project token from chromatic.com)
npx chromatic --project-token=<YOUR_TOKEN>
# CI: add to GitHub Actions
- name: Chromatic
run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}Revisión de cambios visuales
Chromatic muestra una interfaz de diferencias en la que los revisores aceptan o rechazan los cambios visuales. Los cambios aceptados se convierten en la nueva línea base; los rechazados bloquean el PR.
Pruebas de snapshots con Storybook
El test runner también puede ejecutar comprobaciones de accesibilidad mediante @storybook/addon-a11y automáticamente en cada story durante la CI.
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Composición de Storybook
Componga varios Storybooks de distintos repositorios en una sola interfaz; resulta útil para sistemas de diseño compartidos entre proyectos.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Pruebas responsive de stories
Use el addon de viewport para probar stories en tamaños de móvil, tableta y escritorio. Establezca el viewport en los parámetros de la story para fijarla a un tamaño específico.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Prevención de pruebas inestables
Evite las pruebas visuales inestables usando delay en las funciones play para esperar a que terminen las animaciones, o desactivando las animaciones globalmente en la vista previa de Storybook.
// .storybook/preview.ts
export const parameters = {
chromatic: { disableSnapshot: false },
// Disable CSS animations for consistent screenshots
};
// Global CSS for tests:
// * { animation: none !important; transition: none !important; }Informes de cobertura
Ejecute test-storybook --coverage para generar un informe de cobertura que muestre qué líneas de los componentes ejercitan las pruebas de las funciones play.
Comprobación rápida
¿Dónde ejecuta sus interacciones la función play de Storybook?
Recapitulación
Las funciones play prueban las interacciones de los componentes dentro de Storybook mediante @storybook/test. El test runner convierte las funciones play en pruebas de Jest para la CI. Chromatic añade snapshots de regresión visual y señala los cambios de la interfaz a nivel de píxel para revisarlos antes de fusionar.
Preguntas frecuentes
¿La lección «Pruebas de Storybook y regresión visual» es gratis?
Sí — el texto completo de «Pruebas de Storybook y regresión visual» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Pruebas de Storybook y regresión visual»?
Ejecute funciones play para pruebas de interacción e integre Chromatic para comparar diferencias visuales. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Pruebas de Storybook y regresión visual»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar Storybook en un proyecto de React
- Escribir historias CSF3
- Args, Controls y el addon Actions
- Pruebas de Storybook y regresión visual