1# Advanced JavaScript Testing Patterns
2 
3Advanced patterns for integration testing, frontend component testing, fixtures, snapshot testing, coverage, and common test utilities.
4 
5## Integration Testing
6 
7### Pattern 1: API Integration Tests
8 
9```typescript
10// tests/integration/user.api.test.ts
11import request from "supertest";
12import { app } from "../../src/app";
13import { pool } from "../../src/config/database";
14 
15describe("User API Integration Tests", () => {
16  beforeAll(async () => {
17    // Setup test database
18    await pool.query("CREATE TABLE IF NOT EXISTS users (...)");
19  });
20 
21  afterAll(async () => {
22    // Cleanup
23    await pool.query("DROP TABLE IF EXISTS users");
24    await pool.end();
25  });
26 
27  beforeEach(async () => {
28    // Clear data before each test
29    await pool.query("TRUNCATE TABLE users CASCADE");
30  });
31 
32  describe("POST /api/users", () => {
33    it("should create a new user", async () => {
34      const userData = {
35        name: "John Doe",
36        email: "[email protected]",
37        password: "password123",
38      };
39 
40      const response = await request(app)
41        .post("/api/users")
42        .send(userData)
43        .expect(201);
44 
45      expect(response.body).toMatchObject({
46        name: userData.name,
47        email: userData.email,
48      });
49      expect(response.body).toHaveProperty("id");
50      expect(response.body).not.toHaveProperty("password");
51    });
52 
53    it("should return 400 if email is invalid", async () => {
54      const userData = {
55        name: "John Doe",
56        email: "invalid-email",
57        password: "password123",
58      };
59 
60      const response = await request(app)
61        .post("/api/users")
62        .send(userData)
63        .expect(400);
64 
65      expect(response.body).toHaveProperty("error");
66    });
67 
68    it("should return 409 if email already exists", async () => {
69      const userData = {
70        name: "John Doe",
71        email: "[email protected]",
72        password: "password123",
73      };
74 
75      await request(app).post("/api/users").send(userData);
76 
77      const response = await request(app)
78        .post("/api/users")
79        .send(userData)
80        .expect(409);
81 
82      expect(response.body.error).toContain("already exists");
83    });
84  });
85 
86  describe("GET /api/users/:id", () => {
87    it("should get user by id", async () => {
88      const createResponse = await request(app).post("/api/users").send({
89        name: "John Doe",
90        email: "[email protected]",
91        password: "password123",
92      });
93 
94      const userId = createResponse.body.id;
95 
96      const response = await request(app)
97        .get(`/api/users/${userId}`)
98        .expect(200);
99 
100      expect(response.body).toMatchObject({
101        id: userId,
102        name: "John Doe",
103        email: "[email protected]",
104      });
105    });
106 
107    it("should return 404 if user not found", async () => {
108      await request(app).get("/api/users/999").expect(404);
109    });
110  });
111 
112  describe("Authentication", () => {
113    it("should require authentication for protected routes", async () => {
114      await request(app).get("/api/users/me").expect(401);
115    });
116 
117    it("should allow access with valid token", async () => {
118      // Create user and login
119      await request(app).post("/api/users").send({
120        name: "John Doe",
121        email: "[email protected]",
122        password: "password123",
123      });
124 
125      const loginResponse = await request(app).post("/api/auth/login").send({
126        email: "[email protected]",
127        password: "password123",
128      });
129 
130      const token = loginResponse.body.token;
131 
132      const response = await request(app)
133        .get("/api/users/me")
134        .set("Authorization", `Bearer ${token}`)
135        .expect(200);
136 
137      expect(response.body.email).toBe("[email protected]");
138    });
139  });
140});
141```
142 
143### Pattern 2: Database Integration Tests
144 
145```typescript
146// tests/integration/user.repository.test.ts
147import { describe, it, expect, beforeAll, afterAll, beforeEach } from "vitest";
148import { Pool } from "pg";
149import { UserRepository } from "../../src/repositories/user.repository";
150 
151describe("UserRepository Integration Tests", () => {
152  let pool: Pool;
153  let repository: UserRepository;
154 
155  beforeAll(async () => {
156    pool = new Pool({
157      host: "localhost",
158      port: 5432,
159      database: "test_db",
160      user: "test_user",
161      password: "test_password",
162    });
163 
164    repository = new UserRepository(pool);
165 
166    // Create tables
167    await pool.query(`
168      CREATE TABLE IF NOT EXISTS users (
169        id SERIAL PRIMARY KEY,
170        name VARCHAR(255) NOT NULL,
171        email VARCHAR(255) UNIQUE NOT NULL,
172        password VARCHAR(255) NOT NULL,
173        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
174      )
175    `);
176  });
177 
178  afterAll(async () => {
179    await pool.query("DROP TABLE IF EXISTS users");
180    await pool.end();
181  });
182 
183  beforeEach(async () => {
184    await pool.query("TRUNCATE TABLE users CASCADE");
185  });
186 
187  it("should create a user", async () => {
188    const user = await repository.create({
189      name: "John Doe",
190      email: "[email protected]",
191      password: "hashed_password",
192    });
193 
194    expect(user).toHaveProperty("id");
195    expect(user.name).toBe("John Doe");
196    expect(user.email).toBe("[email protected]");
197  });
198 
199  it("should find user by email", async () => {
200    await repository.create({
201      name: "John Doe",
202      email: "[email protected]",
203      password: "hashed_password",
204    });
205 
206    const user = await repository.findByEmail("[email protected]");
207 
208    expect(user).toBeTruthy();
209    expect(user?.name).toBe("John Doe");
210  });
211 
212  it("should return null if user not found", async () => {
213    const user = await repository.findByEmail("[email protected]");
214    expect(user).toBeNull();
215  });
216});
217```
218 
219## Frontend Testing with Testing Library
220 
221### Pattern 1: React Component Testing
222 
223```typescript
224// components/UserForm.tsx
225import { useState } from 'react';
226 
227interface Props {
228  onSubmit: (user: { name: string; email: string }) => void;
229}
230 
231export function UserForm({ onSubmit }: Props) {
232  const [name, setName] = useState('');
233  const [email, setEmail] = useState('');
234 
235  const handleSubmit = (e: React.FormEvent) => {
236    e.preventDefault();
237    onSubmit({ name, email });
238  };
239 
240  return (
241    <form onSubmit={handleSubmit}>
242      <input
243        type="text"
244        placeholder="Name"
245        value={name}
246        onChange={(e) => setName(e.target.value)}
247        data-testid="name-input"
248      />
249      <input
250        type="email"
251        placeholder="Email"
252        value={email}
253        onChange={(e) => setEmail(e.target.value)}
254        data-testid="email-input"
255      />
256      <button type="submit">Submit</button>
257    </form>
258  );
259}
260 
261// components/UserForm.test.tsx
262import { render, screen, fireEvent } from '@testing-library/react';
263import { describe, it, expect, vi } from 'vitest';
264import { UserForm } from './UserForm';
265 
266describe('UserForm', () => {
267  it('should render form inputs', () => {
268    render(<UserForm onSubmit={vi.fn()} />);
269 
270    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument();
271    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
272    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
273  });
274 
275  it('should update input values', () => {
276    render(<UserForm onSubmit={vi.fn()} />);
277 
278    const nameInput = screen.getByTestId('name-input') as HTMLInputElement;
279    const emailInput = screen.getByTestId('email-input') as HTMLInputElement;
280 
281    fireEvent.change(nameInput, { target: { value: 'John Doe' } });
282    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
283 
284    expect(nameInput.value).toBe('John Doe');
285    expect(emailInput.value).toBe('[email protected]');
286  });
287 
288  it('should call onSubmit with form data', () => {
289    const onSubmit = vi.fn();
290    render(<UserForm onSubmit={onSubmit} />);
291 
292    fireEvent.change(screen.getByTestId('name-input'), {
293      target: { value: 'John Doe' },
294    });
295    fireEvent.change(screen.getByTestId('email-input'), {
296      target: { value: '[email protected]' },
297    });
298    fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
299 
300    expect(onSubmit).toHaveBeenCalledWith({
301      name: 'John Doe',
302      email: '[email protected]',
303    });
304  });
305});
306```
307 
308### Pattern 2: Testing Hooks
309 
310```typescript
311// hooks/useCounter.ts
312import { useState, useCallback } from "react";
313 
314export function useCounter(initialValue = 0) {
315  const [count, setCount] = useState(initialValue);
316 
317  const increment = useCallback(() => setCount((c) => c + 1), []);
318  const decrement = useCallback(() => setCount((c) => c - 1), []);
319  const reset = useCallback(() => setCount(initialValue), [initialValue]);
320 
321  return { count, increment, decrement, reset };
322}
323 
324// hooks/useCounter.test.ts
325import { renderHook, act } from "@testing-library/react";
326import { describe, it, expect } from "vitest";
327import { useCounter } from "./useCounter";
328 
329describe("useCounter", () => {
330  it("should initialize with default value", () => {
331    const { result } = renderHook(() => useCounter());
332    expect(result.current.count).toBe(0);
333  });
334 
335  it("should initialize with custom value", () => {
336    const { result } = renderHook(() => useCounter(10));
337    expect(result.current.count).toBe(10);
338  });
339 
340  it("should increment count", () => {
341    const { result } = renderHook(() => useCounter());
342 
343    act(() => {
344      result.current.increment();
345    });
346 
347    expect(result.current.count).toBe(1);
348  });
349 
350  it("should decrement count", () => {
351    const { result } = renderHook(() => useCounter(5));
352 
353    act(() => {
354      result.current.decrement();
355    });
356 
357    expect(result.current.count).toBe(4);
358  });
359 
360  it("should reset to initial value", () => {
361    const { result } = renderHook(() => useCounter(10));
362 
363    act(() => {
364      result.current.increment();
365      result.current.increment();
366    });
367 
368    expect(result.current.count).toBe(12);
369 
370    act(() => {
371      result.current.reset();
372    });
373 
374    expect(result.current.count).toBe(10);
375  });
376});
377```
378 
379## Test Fixtures and Factories
380 
381```typescript
382// tests/fixtures/user.fixture.ts
383import { faker } from "@faker-js/faker";
384 
385export function createUserFixture(overrides?: Partial<User>): User {
386  return {
387    id: faker.string.uuid(),
388    name: faker.person.fullName(),
389    email: faker.internet.email(),
390    createdAt: faker.date.past(),
391    ...overrides,
392  };
393}
394 
395export function createUsersFixture(count: number): User[] {
396  return Array.from({ length: count }, () => createUserFixture());
397}
398 
399// Usage in tests
400import {
401  createUserFixture,
402  createUsersFixture,
403} from "../fixtures/user.fixture";
404 
405describe("UserService", () => {
406  it("should process user", () => {
407    const user = createUserFixture({ name: "John Doe" });
408    // Use user in test
409  });
410 
411  it("should handle multiple users", () => {
412    const users = createUsersFixture(10);
413    // Use users in test
414  });
415});
416```
417 
418## Snapshot Testing
419 
420```typescript
421// components/UserCard.test.tsx
422import { render } from '@testing-library/react';
423import { describe, it, expect } from 'vitest';
424import { UserCard } from './UserCard';
425 
426describe('UserCard', () => {
427  it('should match snapshot', () => {
428    const user = {
429      id: '1',
430      name: 'John Doe',
431      email: '[email protected]',
432      avatar: 'https://example.com/avatar.jpg',
433    };
434 
435    const { container } = render(<UserCard user={user} />);
436 
437    expect(container.firstChild).toMatchSnapshot();
438  });
439 
440  it('should match snapshot with loading state', () => {
441    const { container } = render(<UserCard loading />);
442    expect(container.firstChild).toMatchSnapshot();
443  });
444});
445```
446 
447## Coverage Reports
448 
449```typescript
450// package.json
451{
452  "scripts": {
453    "test": "vitest",
454    "test:coverage": "vitest --coverage",
455    "test:ui": "vitest --ui"
456  }
457}
458```
459 
460## Common Patterns
461 
462### Test Organization
463 
464```typescript
465describe("UserService", () => {
466  describe("createUser", () => {
467    it("should create user successfully", () => {});
468    it("should throw error if email exists", () => {});
469    it("should hash password", () => {});
470  });
471 
472  describe("updateUser", () => {
473    it("should update user", () => {});
474    it("should throw error if not found", () => {});
475  });
476});
477```
478 
479### Testing Promises
480 
481```typescript
482// Using async/await
483it("should fetch user", async () => {
484  const user = await service.fetchUser("1");
485  expect(user).toBeDefined();
486});
487 
488// Testing rejections
489it("should throw error", async () => {
490  await expect(service.fetchUser("invalid")).rejects.toThrow("Not found");
491});
492```
493 
494### Testing Timers
495 
496```typescript
497import { vi } from "vitest";
498 
499it("should call function after delay", () => {
500  vi.useFakeTimers();
501 
502  const callback = vi.fn();
503  setTimeout(callback, 1000);
504 
505  expect(callback).not.toHaveBeenCalled();
506 
507  vi.advanceTimersByTime(1000);
508 
509  expect(callback).toHaveBeenCalled();
510 
511  vi.useRealTimers();
512});
513```
514