jest

Jest Best Practices

Overview

Aspect	Recommendation
Version	Jest 29+
UI Testing	@testing-library/react
Mocking	jest.mock, jest.fn
Coverage	Built-in (--coverage)

---

Configuration

jest.config.ts

import type { Config } from 'jest'

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom', // or 'node' for backend
  roots: ['<rootDir>/src'],
  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.stories.tsx',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
}

export default config

Setup File

// jest.setup.ts
import '@testing-library/jest-dom'

// Mock window.matchMedia
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
})

// Reset mocks between tests
beforeEach(() => {
  jest.clearAllMocks()
})

---

Test Structure

Basic Test File

import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals'

describe('MyFunction', () => {
  beforeEach(() => {
    // Setup before each test
  })

  afterEach(() => {
    // Cleanup after each test
  })

  it('should return expected result', () => {
    const result = myFunction('input')
    expect(result).toBe('expected')
  })

  it('should throw on invalid input', () => {
    expect(() => myFunction(null)).toThrow('Invalid input')
  })

  it.each([
    ['input1', 'output1'],
    ['input2', 'output2'],
    ['input3', 'output3'],
  ])('should transform %s to %s', (input, expected) => {
    expect(myFunction(input)).toBe(expected)
  })
})