M

MLOG

Español

Domina patrones avanzados de Jest para software fiable y mantenible. Explora mocking, pruebas de snapshot, matchers personalizados y más para equipos de desarrollo globales.

Jest: Patrones de Pruebas Avanzados para Software Robusto

En el acelerado panorama actual del desarrollo de software, garantizar la fiabilidad y estabilidad de tu base de código es primordial. Si bien Jest se ha convertido en un estándar de facto para las pruebas de JavaScript, ir más allá de las pruebas unitarias básicas desbloquea un nuevo nivel de confianza en tus aplicaciones. Esta publicación profundiza en patrones avanzados de pruebas con Jest que son esenciales para construir software robusto, atendiendo a una audiencia global de desarrolladores.

¿Por Qué Ir Más Allá de las Pruebas Unitarias Básicas?

Las pruebas unitarias básicas verifican componentes individuales de forma aislada. Sin embargo, las aplicaciones del mundo real son sistemas complejos donde los componentes interactúan. Los patrones de pruebas avanzados abordan estas complejidades permitiéndonos:

Dominando Mocking y Spies

El mocking es crucial para aislar la unidad bajo prueba reemplazando sus dependencias con sustitutos controlados. Jest proporciona herramientas potentes para esto:

jest.fn(): La Base de los Mocks y Spies

jest.fn() crea una función mock. Puedes rastrear sus llamadas, argumentos y valores de retorno. Este es el bloque de construcción para estrategias de mocking más sofisticadas.

Ejemplo: Rastreo de Llamadas a Funciones

// component.js
export const fetchData = () => {
  // Simula una llamada a la API
  return Promise.resolve({ data: 'some data' });
};

export const processData = async (fetcher) => {
  const result = await fetcher();
  return `Processed: ${result.data}`;
};

// component.test.js
import { processData } from './component';

test('should process data correctly', async () => {
  const mockFetcher = jest.fn().mockResolvedValue({ data: 'mocked data' });
  const result = await processData(mockFetcher);
  expect(result).toBe('Processed: mocked data');
  expect(mockFetcher).toHaveBeenCalledTimes(1);
  expect(mockFetcher).toHaveBeenCalledWith();
});

jest.spyOn(): Observando Sin Reemplazar

jest.spyOn() te permite observar llamadas a un método en un objeto existente sin necesariamente reemplazar su implementación. También puedes mockear la implementación si es necesario.

Ejemplo: Espiando un Método de Módulo

// logger.js
export const logInfo = (message) => {
  console.log(`INFO: ${message}`);
};

// service.js
import { logInfo } from './logger';

export const performTask = (taskName) => {
  logInfo(`Starting task: ${taskName}`);
  // ... lógica de la tarea ...
  logInfo(`Task ${taskName} completed.`);
};

// service.test.js
import { performTask } from './service';
import * as logger from './logger';

test('should log task start and completion', () => {
  const logSpy = jest.spyOn(logger, 'logInfo');

  performTask('backup');

  expect(logSpy).toHaveBeenCalledTimes(2);
  expect(logSpy).toHaveBeenCalledWith('Starting task: backup');
  expect(logSpy).toHaveBeenCalledWith('Task backup completed.');

  logSpy.mockRestore(); // Importante restaurar la implementación original
});

Mocking de Importaciones de Módulos

Las capacidades de mocking de módulos de Jest son extensas. Puedes mockear módulos enteros o exportaciones específicas.

Ejemplo: Mocking de un Cliente API Externo

// api.js
import axios from 'axios';

export const getUser = async (userId) => {
  const response = await axios.get(`/api/users/${userId}`);
  return response.data;
};

// user-service.js
import { getUser } from './api';

export const getUserFullName = async (userId) => {
  const user = await getUser(userId);
  return `${user.firstName} ${user.lastName}`;
};

// user-service.test.js
import { getUserFullName } from './user-service';
import * as api from './api';

// Mockea todo el módulo de la API
jest.mock('./api');

test('should get full name using mocked API', async () => {
  // Mockea la función específica del módulo mockeado
  api.getUser.mockResolvedValue({ id: 1, firstName: 'Ada', lastName: 'Lovelace' });

  const fullName = await getUserFullName(1);

  expect(fullName).toBe('Ada Lovelace');
  expect(api.getUser).toHaveBeenCalledTimes(1);
  expect(api.getUser).toHaveBeenCalledWith(1);
});

Auto-mocking vs. Mocking Manual

Jest mockea automáticamente los módulos de Node.js. Para módulos ES o módulos personalizados, es posible que necesites jest.mock(). Para un mayor control, puedes crear directorios __mocks__.

Implementaciones de Mock

Puedes proporcionar implementaciones personalizadas para tus mocks.

Ejemplo: Mocking con una Implementación Personalizada

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// calculator.js
import { add, subtract } from './math';

export const calculate = (operation, a, b) => {
  if (operation === 'add') {
    return add(a, b);
  } else if (operation === 'subtract') {
    return subtract(a, b);
  }
  return null;
};

// calculator.test.js
import { calculate } from './calculator';
import * as math from './math';

// Mockea todo el módulo de la matemática
jest.mock('./math');

test('should perform addition using mocked math add', () => {
  // Proporciona una implementación mock para la función 'add'
  math.add.mockImplementation((a, b) => a + b + 10); // Añade 10 al resultado
  math.subtract.mockReturnValue(5); // Mockea también la resta

  const result = calculate('add', 5, 3);

  expect(math.add).toHaveBeenCalledWith(5, 3);
  expect(result).toBe(18); // 5 + 3 + 10

  const subResult = calculate('subtract', 10, 2);
  expect(math.subtract).toHaveBeenCalledWith(10, 2);
  expect(subResult).toBe(5);
});

Pruebas de Snapshot: Preservando la UI y la Configuración

Las pruebas de snapshot son una característica potente para capturar la salida de tus componentes o configuraciones. Son particularmente útiles para probar la interfaz de usuario o verificar estructuras de datos complejas.

Cómo Funcionan las Pruebas de Snapshot

La primera vez que se ejecuta una prueba de snapshot, Jest crea un archivo .snap que contiene una representación serializada del valor probado. En ejecuciones posteriores, Jest compara la salida actual con el snapshot almacenado. Si difieren, la prueba falla, alertándote de cambios no intencionados. Esto es invaluable para detectar regresiones en componentes de UI en diferentes regiones o configuraciones regionales.

Ejemplo: Creando un Snapshot de un Componente React

Asumiendo que tienes un componente React:

// UserProfile.js
import React from 'react';

const UserProfile = ({ name, email, isActive }) => (
  <div>
    <h2>{name}</h2>
    <p><strong>Email:</strong> {email}</p>
    <p><strong>Status:</strong> {isActive ? 'Active' : 'Inactive'}</p>
  </div>
);

export default UserProfile;

// UserProfile.test.js
import React from 'react';
import renderer from 'react-test-renderer'; // Para snapshots de componentes React
import UserProfile from './UserProfile';

test('renders UserProfile correctly', () => {
  const user = {
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    isActive: true,
  };
  const component = renderer.create(
    <UserProfile {...user} />
  );
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

test('renders inactive UserProfile correctly', () => {
  const user = {
    name: 'John Smith',
    email: 'john.smith@example.com',
    isActive: false,
  };
  const component = renderer.create(
    <UserProfile {...user} />
  );
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot('inactive user profile'); // Snapshot con nombre
});

Después de ejecutar las pruebas, Jest creará un archivo UserProfile.test.js.snap. Cuando actualices el componente, deberás revisar los cambios y, posiblemente, actualizar el snapshot ejecutando Jest con la bandera --updateSnapshot o -u.

Mejores Prácticas para las Pruebas de Snapshot

Custom Matchers: Mejorando la Legibilidad de las Pruebas

Los matchers integrados de Jest son extensos, pero a veces necesitas afirmar condiciones específicas no cubiertas. Los matchers personalizados te permiten crear tu propia lógica de aserción, haciendo tus pruebas más expresivas y legibles.

Creando Custom Matchers

Puedes extender el objeto expect de Jest con tus propios matchers.

Ejemplo: Verificando un Formato de Correo Electrónico Válido

En tu archivo de configuración de Jest (ej., jest.setup.js, configurado en jest.config.js):

// jest.setup.js

expect.extend({
  toBeValidEmail(received) {
    const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    const pass = emailRegex.test(received);

    if (pass) {
      return {
        message: () => `expected ${received} not to be a valid email`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be a valid email`,
        pass: false,
      };
    }
  },
});

// En tu jest.config.js
// module.exports = { setupFilesAfterEnv: ['/jest.setup.js'] };

En tu archivo de prueba:

// validation.test.js

test('should validate email formats', () => {
  expect('test@example.com').toBeValidEmail();
  expect('invalid-email').not.toBeValidEmail();
  expect('another.test@sub.domain.co.uk').toBeValidEmail();
});

Beneficios de los Custom Matchers

Probando Operaciones Asíncronas

JavaScript es altamente asíncrono. Jest proporciona un excelente soporte para probar promesas y async/await.

Usando async/await

Esta es la forma moderna y más legible de probar código asíncrono.

Ejemplo: Probando una Función Asíncrona

// dataService.js
export const fetchUserData = async (userId) => {
  // Simula la obtención de datos después de un retraso
  await new Promise(resolve => setTimeout(resolve, 50));
  if (userId === 1) {
    return { id: 1, name: 'Alice' };
  } else {
    throw new Error('User not found');
  }
};

// dataService.test.js
import { fetchUserData } from './dataService';

test('fetches user data correctly', async () => {
  const user = await fetchUserData(1);
  expect(user).toEqual({ id: 1, name: 'Alice' });
});

test('throws error for non-existent user', async () => {
  await expect(fetchUserData(2)).rejects.toThrow('User not found');
});

Usando .resolves y .rejects

Estos matchers simplifican las pruebas de resoluciones y rechazos de promesas.

Ejemplo: Usando .resolves/.rejects

// dataService.test.js (continuación)

test('fetches user data with .resolves', () => {
  return expect(fetchUserData(1)).resolves.toEqual({ id: 1, name: 'Alice' });
});

test('throws error for non-existent user with .rejects', () => {
  return expect(fetchUserData(2)).rejects.toThrow('User not found');
});

Manejo de Temporizadores

Para funciones que utilizan setTimeout o setInterval, Jest proporciona control de temporizadores.

Ejemplo: Controlando Temporizadores

// delayedGreeter.js
export const greetAfterDelay = (name, callback) => {
  setTimeout(() => {
    callback(`Hello, ${name}!`);
  }, 1000);
};

// delayedGreeter.test.js
import { greetAfterDelay } from './delayedGreeter';

jest.useFakeTimers(); // Habilita temporizadores falsos

test('greets after delay', () => {
  const mockCallback = jest.fn();
  greetAfterDelay('World', mockCallback);

  // Avanza los temporizadores 1000ms
  jest.advanceTimersByTime(1000);

  expect(mockCallback).toHaveBeenCalledTimes(1);
  expect(mockCallback).toHaveBeenCalledWith('Hello, World!');
});

// Restaura temporizadores reales si se necesitan en otro lugar
jest.useRealTimers();

Organización y Estructura de las Pruebas

A medida que tu suite de pruebas crece, la organización se vuelve crítica para la mantenibilidad.

Bloques Describe y Bloques It

Usa describe para agrupar pruebas relacionadas e it (o test) para casos de prueba individuales. Esta estructura refleja la modularidad de la aplicación.

Ejemplo: Pruebas Estructuradas

describe('User Authentication Service', () => {
  let authService;

  beforeEach(() => {
    // Configura mocks o instancias de servicio antes de cada prueba
    authService = require('./authService');
    jest.spyOn(authService, 'login').mockImplementation(() => Promise.resolve({ token: 'fake_token' }));
  });

  afterEach(() => {
    // Limpia los mocks
    jest.restoreAllMocks();
  });

  describe('login functionality', () => {
    it('should successfully log in a user with valid credentials', async () => {
      const result = await authService.login('user@example.com', 'password123');
      expect(result.token).toBeDefined();
      // ... más aserciones ...
    });

    it('should fail login with invalid credentials', async () => {
      jest.spyOn(authService, 'login').mockRejectedValue(new Error('Invalid credentials'));
      await expect(authService.login('user@example.com', 'wrong_password')).rejects.toThrow('Invalid credentials');
    });
  });

  describe('logout functionality', () => {
    it('should clear user session', async () => {
      // Lógica de prueba de cierre de sesión...
    });
  });
});

Hooks de Configuración y Desmontaje

Estos hooks son esenciales para configurar datos mock, conexiones a bases de datos o limpiar recursos entre pruebas.

Probando para Audiencias Globales

Al desarrollar aplicaciones para una audiencia global, las consideraciones de prueba se expanden:

Internacionalización (i18n) y Localización (l10n)

Asegúrate de que tu interfaz de usuario y mensajes se adapten correctamente a diferentes idiomas y formatos regionales.

Ejemplo: Probando el formato de fecha localizado

// dateUtils.js
export const formatLocalizedDate = (date, locale) => {
  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' }).format(date);
};

// dateUtils.test.js
import { formatLocalizedDate } from './dateUtils';

test('formats date correctly for US locale', () => {
  const date = new Date(2023, 10, 15); // 15 de noviembre de 2023
  expect(formatLocalizedDate(date, 'en-US')).toBe('11/15/2023');
});

test('formats date correctly for German locale', () => {
  const date = new Date(2023, 10, 15);
  expect(formatLocalizedDate(date, 'de-DE')).toBe('15.11.2023');
});

Conciencia de Zona Horaria

Prueba cómo tu aplicación maneja diferentes zonas horarias, especialmente para características como la programación o las actualizaciones en tiempo real. Mockear el reloj del sistema o usar librerías que abstraen las zonas horarias puede ser beneficioso.

Matices Culturales en los Datos

Considera cómo los números, monedas y otras representaciones de datos podrían percibirse o esperarse de manera diferente entre culturas. Los matchers personalizados pueden ser particularmente útiles aquí.

Técnicas y Estrategias Avanzadas

Desarrollo Guiado por Pruebas (TDD) y Desarrollo Guiado por Comportamiento (BDD)

Jest se alinea bien con las metodologías TDD (Red-Green-Refactor) y BDD (Given-When-Then). Escribe pruebas que describan el comportamiento deseado antes de escribir el código de implementación. Esto asegura que el código se escriba pensando en la capacidad de prueba desde el principio.

Pruebas de Integración con Jest

Si bien Jest sobresale en las pruebas unitarias, también puede usarse para pruebas de integración. Mockear menos dependencias o usar herramientas como la opción runInBand de Jest puede ayudar.

Ejemplo: Probando la Interacción con la API (simplificado)

// apiService.js
import axios from 'axios';

const API_BASE_URL = 'https://api.example.com';

export const createProduct = async (productData) => {
  const response = await axios.post(`${API_BASE_URL}/products`, productData);
  return response.data;
};

// apiService.test.js (Prueba de integración)
import axios from 'axios';
import { createProduct } from './apiService';

// Mockea axios para pruebas de integración para controlar la capa de red
jest.mock('axios');

test('creates a product via API', async () => {
  const mockProduct = { id: 1, name: 'Gadget' };
  const responseData = { success: true, product: mockProduct };

  axios.post.mockResolvedValue({
    data: responseData,
    status: 201,
    headers: { 'content-type': 'application/json' },
  });

  const newProductData = { name: 'Gadget', price: 99.99 };
  const result = await createProduct(newProductData);

  expect(axios.post).toHaveBeenCalledWith(`${process.env.API_BASE_URL || 'https://api.example.com'}/products`, newProductData);
  expect(result).toEqual(responseData);
});

Paralelismo y Configuración

Jest puede ejecutar pruebas en paralelo para acelerar la ejecución. Configúralo en tu jest.config.js. Por ejemplo, establecer maxWorkers controla el número de procesos paralelos.

Reportes de Cobertura

Usa los reportes de cobertura integrados de Jest para identificar partes de tu base de código que no están siendo probadas. Ejecuta las pruebas con --coverage para generar reportes detallados.

jest --coverage

Revisar los reportes de cobertura ayuda a asegurar que tus patrones de pruebas avanzados cubren eficazmente la lógica crítica, incluyendo las rutas de código de internacionalización y localización.

Conclusión

Dominar los patrones avanzados de pruebas con Jest es un paso significativo hacia la construcción de software fiable, mantenible y de alta calidad para una audiencia global. Al utilizar eficazmente el mocking, las pruebas de snapshot, los matchers personalizados y las técnicas de pruebas asíncronas, puedes mejorar la robustez de tu suite de pruebas y ganar mayor confianza en el comportamiento de tu aplicación en diversos escenarios y regiones. Adoptar estos patrones empodera a los equipos de desarrollo de todo el mundo para ofrecer experiencias de usuario excepcionales.

Comienza a incorporar estas técnicas avanzadas en tu flujo de trabajo hoy mismo para elevar tus prácticas de pruebas de JavaScript.