No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Pruebas de Interacción con Storybook y Testing Library

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:

  1. 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.
  2. 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'
        ],
      };
      
  3. 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:

  1. 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.
  2. 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';
      
  3. 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!

Aportes 4

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Aclaración importante en el segundo hace referencia al texto que tenía el botón, no hagan como yo que no me daba cuenta y me salto error xD

El userEvent viene de la misma librería que within.

import { within, userEvent } from "@storybook/testing-library";
Algo importante y muy funcional es pasar el label de los args y no setearlo tal cual![](https://static.platzi.com/media/user_upload/code2-d84ed894-fb5f-48d2-a9e7-20363e17e6a5.jpg)
Buenos días, Si en caso están probando con la última versión de storybook, lo que se vió en este video ahora está encapsulado en 1 solo paquete: `import { expect, userEvent, within } from "@storybook/test";` El resto se comporta exactamente igual