Mocking Patterns — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Mocking Patterns
📋Spy
⚙️Module Mock
🔄Implementation
✅Verification
🎯 Next: Test →
Step 1 / 4
Speed
Spy
vi.spyOn wraps a function to track calls💡 Analogy
Like installing a recording device on a phone line — calls still go through, but every conversation is logged.
vi.spyOn(global, "fetch") replaces fetch with a spy that tracks all calls. The original behavior runs unless you also mock the return value.
Console Output
> fetch spy installed
> fetch("https://api.example.com") called
> fetchSpy.mock.calls: [["https://api.example.com"]]
●mocking.test.ts
SpyL4–5
1import { vi, describe, it, expect, beforeEach } from 'vitest';
2 
3// 1. Function spy — track calls without changing behavior
4const originalFetch = global.fetch;
5const fetchSpy = vi.spyOn(global, 'fetch');
6 
7// 2. Mock module — replace entire module
8vi.mock('./email-service', () => ({
9  sendEmail: vi.fn().mockResolvedValue({ messageId: 'mock-id' }),
10}));
11 
12// 3. Mock implementation — custom return values
13import { sendEmail } from './email-service';
14 
15describe('Notification service', () => {
16  beforeEach(() => {
17    vi.clearAllMocks(); // reset call history, keep implementations
18  });
19 
20  it('sends welcome email on user creation', async () => {
21    vi.mocked(sendEmail).mockResolvedValueOnce({ messageId: 'test' });
22 
23    await createUser({ name: 'Alice', email: 'alice@test.com' });
24 
25    expect(sendEmail).toHaveBeenCalledWith({
26      to: 'alice@test.com',
27      subject: 'Welcome to the app!',
28      body: expect.stringContaining('Alice'),
29    });
30  });
31 
32  it('does not send email if user creation fails', async () => {
33    vi.mocked(createUser).mockRejectedValueOnce(new Error('DB error'));
34 
35    await expect(createUser({ name: '', email: '' })).rejects.toThrow();
36    expect(sendEmail).not.toHaveBeenCalled();
37  });
38});
39 
40async function createUser(data: {name: string; email: string}) { return data; }
40 lines
Timeline — 4 Steps
Spy
vi.spyOn wraps a function to track calls💡 Analogy
Like installing a recording device on a phone line — calls still go through, but every conversation is logged.
vi.spyOn(global, "fetch") replaces fetch with a spy that tracks all calls. The original behavior runs unless you also mock the return value.
Console Output
> fetch spy installed
> fetch("https://api.example.com") called
> fetchSpy.mock.calls: [["https://api.example.com"]]

Was this page helpful?

Discussion

vi.spyOn wraps a function to track calls

💡 Analogy

Like installing a recording device on a phone line — calls still go through, but every conversation is logged.

vi.spyOn(global, "fetch") replaces fetch with a spy that tracks all calls. The original behavior runs unless you also mock the return value.

Console Output

> fetch spy installed
> fetch("https://api.example.com") called
> fetchSpy.mock.calls: [["https://api.example.com"]]

vi.spyOn wraps a function to track calls

💡 Analogy

Like installing a recording device on a phone line — calls still go through, but every conversation is logged.

vi.spyOn(global, "fetch") replaces fetch with a spy that tracks all calls. The original behavior runs unless you also mock the return value.

Console Output

> fetch spy installed
> fetch("https://api.example.com") called
> fetchSpy.mock.calls: [["https://api.example.com"]]