Pruebas de Componentes en React con Testing Library

Contenido del curso

Fundamentos del Testing en React

Estrategias de Testing en React

Testing de Flujos de Usuario en React

Testing de Hooks en React

Pruebas de Integración y APIs en React

Reflexiones sobre Testing en React

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:50

Pruebas de Componentes en React con Testing Library

Curso de React Testing Library

Clase 4 de 20

Clase 4 / 20

Recursos

¿Cómo realizar un test efectivo para un componente en React?

Realizar tests efectivos para tus componentes es crucial para asegurar la funcionalidad de tus aplicaciones.

Ejecutaremos tests para el componente Button en nuestra aplicación de Platzi Orders y analizaremos sus prop types.

Al realizar los tests, es esencial entender qué aspectos necesitamos verificar.

¿Cuáles son los prop types del componente Button?

Primero, desglosamos los prop types del componente Button:

Label: el texto que se muestra en el botón.
OnClick: la función que se ejecuta al hacer clic en el botón.
Type: el tipo de botón, que está definido en los prop types.

Si estás comenzando con TypeScript, es recomendable revisar la sección de recursos que proporciona más información sobre interfaces o types.

¿Cómo configuramos el entorno de testing?

Para empezar, generamos un nuevo archivo Button.test.tsx.

Importamos desde Vitest las estructuras de describe, it y expect. Estas herramientas nos ayudarán a organizar y ejecutar los tests.

Creamos una agrupación con describe, nombramos el test como Button, y estructuramos nuestro primer caso: "Debería renderizar el botón".

import { describe, it, expect } from 'vitest';import { describe, it, expect } from 'vitest';import Button from './Button';describe('Button', () => {it('debería renderizar el botón', () => {render(<*Button label="Clic" />);const button = screen.getByText('Clic'); expect(button).toBeInTheDocument();});});

¿Qué son los handlers de eventos y cómo se testean?

El siguiente paso es testear que la función onClick que estamos enviando sea llamada cuando se ejecute el handler onClick.

Patrón 'Arrange, Act, Assert'

Antes de entrar en los detalles del código, exploremos el patrón Arrange, Act, Assert. Esto equivale a preparar, actuar y confirmar:

Arrange: preparar el componente para el test.
Act: ejecutar la acción sobre el componente (en este caso, un clic).
Assert: verificar que el resultado sea el esperado.

Implementamos un test para la función onClick utilizando este patrón:

import { describe, it, expect, vi } from 'vitest';import { render, screen, fireEvent } from '@testing-library/react';import Button from './Button';describe('Button', () => {it('debería llamar a la función onClick', async () => {  const handleClick = vi.fn();render(<*Button label="Clic" onClick={handleClick} />);const button = screen.getByText('Clic');  fireEvent.click(button);expect(handleClick).toHaveBeenCalledTimes(1);  });});

¿Cómo gestionar errores comunes en el testing?

Es posible encontrarse con errores de sintaxis o de ejecución. Por ejemplo, si el botón no se renderiza porque falta la propiedad label, aparecerá un error que nos alertará. Asegúrate de corregirlo antes de continuar.

¿Por qué es importante una buena estructura en los tests?

Tener una estructura clara y concisa en los tests, utilizando patrones como Arrange, Act, Assert, ayuda enormemente a mejorar la organización y comprensión. Además, permite modificar y escalar los tests con más facilidad.

Al aplicar estos conceptos, tus tests serán más robustos y efectivos frente a los cambios o actualizaciones en el código.

Te invito a seguir explorando y aprendiendo nuevas técnicas en el mundo del testing para mejorar la calidad de tus aplicaciones. 🚀

Fundamentos del Testing en React

Por qué el testing salva tu app en producción

Testing de Aplicaciones con Vitest y React

Estructura y Creación de Tests en JavaScript con Vitest

Estrategias de Testing en React

Pruebas de Componentes en React con Testing Library

Table-driven testing con it.each en React

Metodología TDD: red, green y refactor

Uso de Mocks en Testing de Software

Testing de Flujos de Usuario en React

Pruebas de Error en Login con React y Vitest

Pruebas de Login Exitoso en Aplicación Web

Mockear getOrders y probar el dashboard

Testing componentes para superadmins con getByTestId

Testing de Hooks en React

Principios SOLID para código limpio y mantenible en desarrollo software

Testeo de Custom Hooks con Testing Library React Hooks

Cómo vi.spyOn detecta errores reales

Pruebas de Integración y APIs en React

Configura Mock Service Worker en tu proyecto

Pruebas de React con Mock Service Worker y Hooks

Pruebas de Error 500 en Endpoints con Mock Service Worker

Reflexiones sobre Testing en React

IA para generar tests en React con ChatGPT

Cobertura de Código: Tipos y Configuración en Vitest

Cuándo no escribir tests en React

Pruebas de Componentes en React con Testing Library

Progreso del curso

Fundamentos del Testing en React

Estrategias de Testing en React

Testing de Flujos de Usuario en React

Testing de Hooks en React

Pruebas de Integración y APIs en React

Reflexiones sobre Testing en React

Recursos

Recursos