Test Lifecycle Hooks

Test lifecycle hooks control setup and cleanup operations that run at specific points during test execution. Proper use of these hooks prevents test pollution (where one test's state affects another) and keeps test code DRY. Both Jest and Vitest use the same API for lifecycle hooks.

The Four Lifecycle Hooks

beforeAll(fn): Runs once before all tests in the current describe block (or file if not inside a describe). Use for expensive setup that can be shared across tests:

• Database connections
• Server startup
• Loading large fixtures
• MSW server initialization

beforeEach(fn): Runs before each individual test. Use for setup that must be fresh for every test:

• Resetting mock state
• Creating test data
• Rendering components
• Setting up DOM elements

afterEach(fn): Runs after each individual test. Use for cleanup that prevents test pollution:

• Clearing mocks and spies
• Cleaning up DOM
• Resetting global state
• Resetting MSW handlers

afterAll(fn): Runs once after all tests in the block complete. Use for expensive teardown:

• Closing database connections
• Stopping servers
• Cleaning up temporary files
• Closing MSW server

Execution Order

Understanding the execution order is critical for interviews:

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('6 - afterAll'));
beforeEach(() => console.log('2 - beforeEach'));
afterEach(() => console.log('4 - afterEach'));
 
test('first test', () => console.log('3 - test'));
// Output: 1, 2, 3, 4, 2, 3, 4, 6 (for two tests)

Scoping with describe Blocks

Lifecycle hooks are scoped to their describe block. Outer hooks run before inner hooks:

describe('outer', () => {
  beforeEach(() => console.log('outer beforeEach'));
 
  describe('inner', () => {
    beforeEach(() => console.log('inner beforeEach'));
    test('example', () => {});
    // Runs: outer beforeEach -> inner beforeEach -> test
  });
});

This scoping lets you set up common state at the outer level and specific state at the inner level.

Preventing Test Pollution

Test pollution is when one test's side effects affect another test's behavior, causing intermittent failures that are difficult to debug. Common sources:

• Shared mutable objects modified in tests
• Mock functions not cleared between tests
• DOM elements not removed after rendering
• Global state (window.location, localStorage) not reset

The solution is consistent use of beforeEach for fresh setup and afterEach for cleanup:

beforeEach(() => {
  jest.clearAllMocks(); // or vi.clearAllMocks()
  localStorage.clear();
});
 
afterEach(() => {
  cleanup(); // RTL's cleanup (automatic in most setups)
});

Async Lifecycle Hooks

All lifecycle hooks support async operations. Return a promise or use async/await:

beforeAll(async () => {
  await database.connect();
});
 
afterAll(async () => {
  await database.disconnect();
});

Common Pitfalls

• Putting test-specific setup in beforeAll instead of beforeEach, causing shared mutable state
• Forgetting to clean up in afterEach, leading to flaky tests
• Over-using lifecycle hooks for simple tests (inline setup is often clearer for simple cases)
• Using beforeAll for mock setup that should reset between tests

Best Practice

Prefer inline setup for simple tests -- it makes tests self-contained and readable. Use lifecycle hooks when setup is expensive or when the same setup is repeated across many tests in a describe block.