Simular módulos y llamadas a API
Simule módulos ES con jest.mock(), sustituya fetch con MSW (Mock Service Worker) y pruebe componentes que dependen de datos externos sin realizar llamadas de red reales.
Simular módulos y llamadas a API es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 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é usar mocks?
Las pruebas unitarias deben estar aisladas. Las llamadas reales a la API son lentas, poco fiables y costosas. Los mocks sustituyen las dependencias por dobles de prueba controlados que devuelven respuestas predecibles.
jest.mock(): simular módulos completos
jest.mock('module-path') sustituye el módulo completo por versiones simuladas automáticamente. Todas las exportaciones se convierten en stubs jest.fn(). Llame a mockReturnValue o mockResolvedValue para establecer los valores de retorno.
jest.mock('./api');
import { fetchUser } from './api';
(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });
test('renders user name', async () => {
render(<Profile userId="1" />);
await screen.findByText('Alice');
expect(fetchUser).toHaveBeenCalledWith('1');
});jest.fn(): stubs manuales
jest.fn() crea una función simulada cuyas llamadas puede rastrear y controlar. Resulta útil para props de tipo callback y dependencias de servicios.
const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });Restablecer mocks con beforeEach
Restablezca los mocks entre pruebas para evitar que se filtre el estado. Utilice jest.clearAllMocks() en beforeEach.
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW: Mock Service Worker
MSW intercepta las llamadas reales a fetch/XHR en el nivel de red mediante Service Workers (en el navegador) o interceptores de Node.js (en las pruebas). Escriba handlers de solicitudes que devuelvan respuestas simuladas.
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());Sobrescrituras de MSW por prueba
Sobrescriba el handler predeterminado para un escenario de prueba específico.
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});Simulación de localStorage
Use jest.spyOn para crear mocks de los métodos de Web Storage en las pruebas que utilizan localStorage.
beforeEach(() => {
const store: Record<string, string> = {};
jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});Simulación de temporizadores
jest.useFakeTimers() reemplaza setTimeout/setInterval por versiones controladas por Jest. jest.runAllTimers() adelanta rápidamente todos los temporizadores.
jest.useFakeTimers();
test('shows toast for 3 seconds', () => {
render(<Toast message="Saved!" />);
expect(screen.getByText('Saved!')).toBeInTheDocument();
jest.advanceTimersByTime(3000);
expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});
afterEach(() => jest.useRealTimers());Patrón de fábrica de módulos
En TypeScript, las fábricas de módulos simulados devuelven los tipos correctos.
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));Pruebas con snapshots: úselas con moderación
Las pruebas con snapshots guardan una representación serializada de la salida de un componente y fallan si esta cambia. Son fáciles de crear, pero pueden producir falsos positivos ruidosos. Úselas solo con componentes estables, puros y de presentación.
Comprobación rápida
¿Cuál es la principal ventaja de MSW frente a jest.mock('fetch') para simular API?
Repaso: simulación
jest.mock() reemplaza módulos. jest.fn() crea stubs que se pueden rastrear. Restablezca los mocks en beforeEach. MSW intercepta HTTP a nivel de red, lo que proporciona el enfoque de simulación más realista. Use server.use() por prueba para sobrescribir el comportamiento en escenarios de error. Use temporizadores falsos para el código que depende del tiempo. Prefiera MSW para las pruebas de integración de componentes.
Preguntas frecuentes
¿La lección «Simular módulos y llamadas a API» es gratis?
Sí — el texto completo de «Simular módulos y llamadas a API» 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 «Simular módulos y llamadas a API»?
Simule módulos ES con jest.mock(), sustituya fetch con MSW (Mock Service Worker) y pruebe componentes que dependen de datos externos sin realizar llamadas de red reales. 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 4 de 4.
¿Cuánto tiempo toma la lección «Simular módulos y llamadas a API»?
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
- Configuración de Jest y pruebas básicas
- @testing-library/react: render userEvent
- @testing-library/vue: montar componentes
- Simular módulos y llamadas a API