Introducción a los Tests:Tu primer test en React

Curso de React Testing Library

Fundamentos del Testing en React

Pruebas de Frontend con React: Evita Errores Críticos

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

Testing con Table Driven en React: Mejora Mantenibilidad y Cobertura

Desarrollo Orientado a Pruebas (TDD) en React paso a paso

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

Testeo de Órdenes en Dashboard con Vitest y React Testing Library

Testeo de Componentes para Administradores en Platzi Orders

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

Testing con Spies en React: Verificación de Funciones y Errores

Pruebas de Integración y APIs en React

Configuración de Mock Service Worker para Pruebas en Visual Studio Code

Pruebas de React con Mock Service Worker y Hooks

Pruebas de Error 500 en Endpoints con Mock Service Worker

Reflexiones sobre Testing en React

Testing con Inteligencia Artificial en React

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

Cuándo y cómo implementar test en proyectos de React

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿Por qué es fundamental el testing y qué es la pirámide de testing?

El testing o las pruebas de software son la clave. A través de diferentes tipos de pruebas, podemos identificar errores y mejorar la calidad del software antes de que llegue a producción.

La pirámide de testing es una guía visual que nos ayuda a organizar las pruebas.

Unit Tests: son la base. Aquí probamos funciones específicas y detalles pequeños de nuestra aplicación.
Integration Tests: en el medio, se encargan de verificar que los unit tests trabajen juntos correctamente.
End to End Tests: en la cima, prueban todo el sistema integrando bases de datos, APIs y más.

Como afirmó Kent C Dodds, el creador de Testing Library:

"Entre más se asemejen tus tests a la manera en que tu software será usado, mayor confiabilidad vas a tener."

¿Cuál es la estructura de un test?

La estructura de un test sigue un flujo que nos asegura claridad al probar nuestros códigos. Vamos a ver cada componente:

Describe: agrupa casos de prueba. Es la primera capa.
It: representa los casos de prueba individuales dentro de un bloque describe.
Expect: establece las condiciones que esperamos cumplir o no.

¿Cómo crear un archivo de test en TypeScript y JSX?

Para comenzar a testear, creamos un archivo destinado a pruebas en nuestro proyecto:

Crea un nuevo archivo. Ejemplo: mi-primer-test.test.tsx.
Es esencial que la extensión .test indique al test runner que este archivo contiene pruebas que se deben ejecutar.

Ejemplo de un test básico

A continuación un ejemplo de una función simple para sumar dos números y su respectiva prueba:

import { describe, it, expect } from 'vitest';

// Función para sumar dos números
function suma(a: number, b: number): number {
  return a + b;
}

// Suite de pruebas
describe('Mi primer test', () => {
  // Caso de prueba para sumar dos números
  it('La suma de dos números', () => {
    const resultado = suma(2, 3);
    expect(resultado).toBe(5); // Verificación de resultado esperado
  });
});

Ejemplo de comparación de textos

También podemos comparar textos para asegurar que las strings sean las que esperamos:

it('Dos textos iguales', () => {
  const texto1 = 'platzi conf';
  const texto2 = 'platzi conf';
  expect(texto1).toBe(texto2);
});

El uso de estas prácticas fortalece la robustez de tu aplicación al validar que las funciones desempeñen lo que se esperaba, garantizando la correcta interacción dentro del software.

¿Cómo testar más allá de lo básico?

Ahora que has aprendido las bases para crear tus pruebas, te animo a ser creativo.

Prueba operaciones diferentes como multiplicaciones, divisiones o compara arrays.

Explorar y compartir tu progreso en la comunidad fomenta un aprendizaje continuo y enriquecedor.

En la próxima clase, abordaremos cómo testear un componente de React 🛠️. ¡Sigue adelante y mejora tus habilidades en testing!

Aportes 5

Preguntas 1

Ordenar por:

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

Jorge Eliecer Rangel Jimenez

hace 5 meses

```js it('Should be palindrome', () => { const palindromeVerify = (word: string) => { const reverseWord = word.split('').reverse().join('') if(reverseWord === word) return true return false } const isPalindrome = palindromeVerify("oso") expect(isPalindrome).toBe(true) }) ```

Juan Jose Bernal Villamarin

hace 5 meses

Juan Jose Bernal Villamarin

hace 5 meses

Lo más común es comparar objetos y arreglos, creo que el `toEqual `es la manera más sencilla de hacerlo, pero no se si a nivel profundo sea una comparación valida, sin embargo aquí dejo mi aporte de los 3 it adicionales que creé, saludos: ```js describe('My first test', () => { it('two numbers add function ', () => { const sum = (a: number, b: number) => a + b; const result = sum(2, 3); expect(result).toBe(5); }); it('two equal strings', () => { const text1 = 'PlayStation'; const text2 = 'PlayStation'; expect(text1).toEqual(text2); }); it('two equal objects', () => { const obj1 = { name: 'John', age: 25 }; const obj2 = { name: 'John', age: 25 }; expect(obj1).toEqual(obj2); }); it('two equal arrays', () => { const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; expect(arr1).toEqual(arr2); }); it('two equal arrays with objects', () => { const arr1 = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; const arr2 = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; expect(arr1).toEqual(arr2); }); }); ```describe('My first test', () => { it('two numbers add function ', () => { const sum = (a: number, b: number) => a + b; const result = sum(2, 3); expect(result).toBe(5); }); it('two equal strings', () => { const text1 = 'PlayStation'; const text2 = 'PlayStation'; expect(text1).toEqual(text2); }); it('two equal objects', () => { const obj1 = { name: 'John', age: 25 }; const obj2 = { name: 'John', age: 25 }; expect(obj1).toEqual(obj2); }); it('two equal arrays', () => { const arr1 = \[1, 2, 3]; const arr2 = \[1, 2, 3]; expect(arr1).toEqual(arr2); }); it('two equal arrays with objects', () => { const arr1 = \[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; const arr2 = \[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; expect(arr1).toEqual(arr2); }); });

Víctor Rolack

hace 5 meses

También puedes hacer test negando algo :) ```js it("dos textos iguales", () => { const text1 = "platzi conf"; const text2 = "platzi"; expect(text1).not.toBe(text2); }); ```

Elioenai Garcia

hace 3 meses

Vaya forma de decir que un test no pasó ó falló 😎