0Pricing
Frontend Academy · Lección

Configuración de Jest y pruebas básicas

Instale Jest, escriba pruebas con describe/it/expect, use matchers como toBe y toEqual, y ejecute las pruebas en modo watch durante el desarrollo.

Configuración de Jest y pruebas básicas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué probar el código frontend?

Las pruebas detectan regresiones cuando cambia el código. Documentan el comportamiento esperado. Le dan confianza para refactorizar. Sin pruebas, cada cambio implica arriesgarse a que algo más se haya estropeado.

Instalación de Jest

Para un proyecto de Vite + React, utilice Vitest (un ejecutor de pruebas compatible con Jest y nativo de Vite). En otras configuraciones, instale Jest con babel-jest o ts-jest para TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Nombres de los archivos de prueba

Coloque los archivos de prueba junto al código fuente: Button.test.ts, utils.spec.ts. También puede colocarlos en una carpeta __tests__/. Jest encuentra los archivos que coinciden con *.test.* o *.spec.*.

describe, it, expect

Organice las pruebas con bloques describe (grupos) y funciones it/test (pruebas individuales). Realice las comprobaciones con expect.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Matchers habituales

Jest proporciona muchos matchers: toBe (igualdad estricta), toEqual (igualdad profunda), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow y toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Probar código asíncrono

Devuelva la promesa o utilice async/await en las pruebas. Jest espera a que la promesa se resuelva antes de dar la prueba por terminada.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach y afterEach

Ejecute la preparación y la limpieza antes y después de cada prueba para mantenerlas aisladas.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Ejecución de pruebas

npm test ejecuta todas las pruebas. npm test -- --watch (Jest) o vitest en modo watch vuelven a ejecutar las pruebas cuando cambia un archivo. La interfaz de Vitest (vitest --ui) proporciona un ejecutor de pruebas en el navegador.

Cobertura de pruebas

jest --coverage (o vitest run --coverage) genera un informe de cobertura que muestra qué líneas se han probado. Un objetivo de cobertura del 70 % o superior es habitual en los equipos. Una cobertura del 100 % no significa que no haya errores.

Escribir código fácil de probar

Las funciones puras (sin efectos secundarios) se pueden probar fácilmente. Mantenga las funciones pequeñas y centradas. Inyecte las dependencias en lugar de importarlas directamente; así resulta sencillo sustituirlas por dobles de prueba.

Aislamiento de las pruebas

Cada prueba debe ser completamente independiente. Las pruebas que dependen de los efectos secundarios de otras son frágiles. Evite compartir estados mutables entre pruebas. Restablezca todos los mocks en afterEach.

Comprobación rápida

¿Qué matcher de Jest comprueba la igualdad profunda de dos objetos?

Resumen: fundamentos de Jest

describe agrupa las pruebas. it/test define pruebas individuales. expect y los matchers comprueban los resultados. Utilice toBe para valores primitivos y toEqual para objetos y arrays. Pruebe el código asíncrono con async/await o devolviendo la promesa. Utilice beforeEach/afterEach para el aislamiento. Los informes de cobertura muestran qué líneas se han probado. Las funciones puras son las más fáciles de probar.

Preguntas frecuentes

¿La lección «Configuración de Jest y pruebas básicas» es gratis?

Sí — el texto completo de «Configuración de Jest y pruebas básicas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración de Jest y pruebas básicas»?

Instale Jest, escriba pruebas con describe/it/expect, use matchers como toBe y toEqual, y ejecute las pruebas en modo watch durante el desarrollo. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Configuración de Jest y pruebas básicas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración de Jest y pruebas básicas
  2. @testing-library/react: render userEvent
  3. @testing-library/vue: montar componentes
  4. Simular módulos y llamadas a API
← Volver a Frontend Academy