Estructura y Creación de Tests en JavaScript con Vitest

¿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.

1. Unit Tests: son la base. Aquí probamos funciones específicas y detalles pequeños de nuestra aplicación.

2. Integration Tests: en el medio, se encargan de verificar que los unit tests trabajen juntos correctamente.

3. 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:

1. Crea un nuevo archivo. Ejemplo: mi-primer-test.test.tsx.

2. 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!