Pruebas de Interacción con Storybook y Testing Library

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:55

Pruebas de Interacción con Storybook y Testing Library

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 18 de 21

Clase 18 / 21

Recursos

¿Qué son las pruebas de interacción?

Las pruebas de interacción son una herramienta crucial en el desarrollo de software que permite verificar cómo un usuario interactúa con nuestras interfaces. En esta clase, se utiliza la biblioteca Testing Library junto con Jest para implementar estas pruebas, además del addon de Interactions. Este método nos ayuda a identificar si nuestros componentes son efectivos y que cumplen con los requisitos esperados.

¿Cómo se configuran las pruebas de interacción?

Para configurar las pruebas de interacción, sigue estos pasos:

Instalación de dependencias:
- Instala las bibliotecas necesarias usando el siguiente comando en tu terminal:
```
npm install @testing-library/react @storybook/addon-interactions --save-dev
```
- Asegúrate de tener Jest instalado, pues es fundamental para las pruebas.
Configuración del archivo main.js:
- Asegúrate de que el addon de interacción esté configurado en storybook.main.js. Por ejemplo:
```
module.exports = {
  addons: [
    '@storybook/addon-interactions'
  ],
};
```
Preparación del entorno de pruebas:
- Una vez instalado todo, podemos proceder a escribir las pruebas en nuestras historias de Storybook.

¿Cómo se escriben las pruebas de interacción?

El siguiente paso es escribir las pruebas. Aquí te presentamos cómo hacerlo de manera básica:

Configurar la función de prueba:
- Define una función que se llamará play, la cual contendrá las pruebas de interacción.
- Esta función recibe args y canvas, donde canvas es el elemento que se utilizará para buscar componentes en la interfaz.
Crear y manipular el canvas:
- Usa within de Testing Library para definir el contexto del canvas.
- Busca elementos como botones usando getByRole.
- Asegúrate de importar las funciones necesarias de Testing Library:
```
import { within, userEvent } from '@testing-library/react';
```
Escribir las afirmaciones usando Jest:
- Utiliza expect para definir las expectativas de los componentes:
```
await expect(canvas.getByText('button')).toBeInTheDocument();
```

¿Cómo ejecutar y validar las pruebas?

Una vez que tus pruebas están escritas, necesitas observar que funcionen correctamente en Storybook. Puedes hacerlo corriendo:
```
npm run storybook
```
Al abrir Storybook en el navegador, utiliza la pestaña de "Interactions" para validar los resultados de las pruebas.

Con estos pasos, puedes asegurarte de que tus componentes de la interfaz se comporten correctamente cuando los usuarios interactúan con ellos. ¡Sigue experimentando y compartiendo tus avances para perfeccionar estas habilidades!

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Pruebas de Interacción con Storybook y Testing Library

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos