Jest TypeScript 测试配置指南 - 行业标准测试框架与TS集成教程

jest-typescript by bobmatnyc/claude-mpm-skills

253 周安装量

27 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill jest-typescript

TypeScript JavaScript 框架测试

🇨🇳中文介绍

Jest + TypeScript - 行业标准测试

概述

Jest 是占据 70% 市场份额的行业标准测试框架，为 TypeScript 项目提供了一个成熟、经过实战检验的生态系统。它提供全面的测试能力，包括内置的快照测试、模拟和覆盖率报告。

主要特性：

🏆 行业标准：70% 市场份额，广泛采用
📦 一体化：测试运行器、断言、模拟、覆盖率报告集成在一个包中
📸 快照测试：内置快照支持，用于 UI 测试
🧪 React 集成：兼容 React Testing Library 和 enzyme
🔧 成熟生态系统：丰富的插件、工具和社区支持
🎯 TypeScript 支持：通过 ts-jest 实现完整的类型安全
🔍 覆盖率报告：内置 Istanbul 覆盖率
🌐 多平台支持：Node.js、浏览器（jsdom）、React Native

安装：

npm install -D jest @types/jest ts-jest
npm install -D @testing-library/react @testing-library/jest-dom  # 用于 React

基础设置

1. 初始化 Jest 配置

npx ts-jest config:init

这会创建 jest.config.js：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. TypeScript 配置

tsconfig.json：

{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"],
    "esModuleInterop": true
  }
}

tsconfig.test.json（测试专用）：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["jest", "node", "@testing-library/jest-dom"]
  },
  "include": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/__tests__/**"]
}

4. Package.json 脚本

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:ci": "jest --ci --coverage --maxWorkers=2"
  }
}

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

describe('Calculator', () => {
  let calculator: Calculator;

  beforeEach(() => {
    calculator = new Calculator();
  });

  afterEach(() => {
    // 清理
  });

  it('正确相加两个数字', () => {
    const result = calculator.add(2, 3);
    expect(result).toBe(5);
  });

  it('处理负数', () => {
    expect(calculator.add(-5, 3)).toBe(-2);
  });

  it.each([
    [1, 1, 2],
    [2, 3, 5],
    [10, -5, 5],
  ])('将 %i + %i 相加等于 %i', (a, b, expected) => {
    expect(calculator.add(a, b)).toBe(expected);
  });
});

TypeScript 类型安全测试

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

describe('用户服务', () => {
  it('创建具有正确类型的用户', () => {
    const user: User = {
      id: 1,
      name: 'Alice',
      email: 'alice@example.com',
      role: 'admin',
    };

    // 类型安全断言
    expect(user.id).toEqual(expect.any(Number));
    expect(user.name).toEqual(expect.any(String));
    expect(user.role).toMatch(/^(admin|user)$/);
  });

  it('验证用户对象结构', () => {
    const user = createUser('Bob', 'bob@example.com');

    expect(user).toMatchObject({
      id: expect.any(Number),
      name: 'Bob',
      email: 'bob@example.com',
    });
  });
});

使用 TypeScript 进行模拟

jest.mock 用于模块模拟

import { jest } from '@jest/globals';
import { UserService } from './UserService';
import * as userApi from './api/userApi';

// 模拟整个模块
jest.mock('./api/userApi');

describe('使用模拟的用户服务', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('获取用户数据', async () => {
    const mockUser = { id: 1, name: 'Alice', email: 'alice@example.com' };

    // 类型安全模拟
    const mockedFetchUser = jest.mocked(userApi.fetchUser);
    mockedFetchUser.mockResolvedValue(mockUser);

    const service = new UserService();
    const user = await service.getUser(1);

    expect(mockedFetchUser).toHaveBeenCalledWith(1);
    expect(user).toEqual(mockUser);
  });
});

jest.spyOn 用于方法监视

import { jest } from '@jest/globals';

class Logger {
  log(message: string): void {
    console.log(message);
  }

  error(message: string): void {
    console.error(message);
  }
}

describe('日志监视器', () => {
  let logger: Logger;
  let logSpy: jest.SpyInstance;

  beforeEach(() => {
    logger = new Logger();
    logSpy = jest.spyOn(logger, 'log');
  });

  afterEach(() => {
    logSpy.mockRestore();
  });

  it('跟踪方法调用', () => {
    logger.log('Hello');
    logger.log('World');

    expect(logSpy).toHaveBeenCalledTimes(2);
    expect(logSpy).toHaveBeenCalledWith('Hello');
    expect(logSpy).toHaveBeenLastCalledWith('World');
  });

  it('提供自定义实现', () => {
    logSpy.mockImplementation((msg: string) => {
      console.log(`[CUSTOM] ${msg}`);
    });

    logger.log('Test');
    expect(logSpy).toHaveBeenCalledWith('Test');
  });
});

类型安全的模拟函数

import { jest } from '@jest/globals';

interface ApiResponse<T> {
  data: T;
  status: number;
}

type FetchUserFn = (id: number) => Promise<ApiResponse<User>>;

describe('类型安全模拟', () => {
  it('创建类型化的模拟函数', async () => {
    const mockFetchUser = jest.fn<FetchUserFn>()
      .mockResolvedValue({
        data: { id: 1, name: 'Alice', email: 'alice@example.com', role: 'user' },
        status: 200,
      });

    const result = await mockFetchUser(1);

    expect(result.data.name).toBe('Alice');
    expect(result.status).toBe(200);
    expect(mockFetchUser).toHaveBeenCalledWith(1);
  });

  it('使用模拟实现', () => {
    const mockCalculate = jest.fn<(x: number, y: number) => number>()
      .mockImplementation((x, y) => x + y);

    expect(mockCalculate(5, 3)).toBe(8);
    expect(mockCalculate).toHaveBeenCalledWith(5, 3);
  });
});

import { jest } from '@jest/globals';

describe('定时器模拟', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.useRealTimers();
  });

  it('快进时间', () => {
    const callback = jest.fn();
    setTimeout(callback, 1000);

    jest.advanceTimersByTime(500);
    expect(callback).not.toHaveBeenCalled();

    jest.advanceTimersByTime(500);
    expect(callback).toHaveBeenCalledTimes(1);
  });

  it('运行所有定时器', () => {
    const callback = jest.fn();
    setTimeout(callback, 1000);
    setTimeout(callback, 2000);

    jest.runAllTimers();
    expect(callback).toHaveBeenCalledTimes(2);
  });

  it('处理间隔定时器', () => {
    const callback = jest.fn();
    setInterval(callback, 1000);

    jest.advanceTimersByTime(3500);
    expect(callback).toHaveBeenCalledTimes(3);

    jest.clearAllTimers();
  });
});

React Testing Library + TypeScript

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D jest-environment-jsdom

jest.config.ts（React）：

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
  transform: {
    '^.+\\.tsx?$': ['ts-jest', {
      tsconfig: {
        jsx: 'react-jsx',
      },
    }],
  },
};

export default config;

src/test/setup.ts：

import '@testing-library/jest-dom';
import { cleanup } from '@testing-library/react';
import { afterEach } from '@jest/globals';

afterEach(() => {
  cleanup();
});

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Counter } from './Counter';

describe('计数器组件', () => {
  it('渲染初始计数', () => {
    render(<Counter initialCount={0} />);
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
  });

  it('点击按钮时增加计数器', async () => {
    const user = userEvent.setup();
    render(<Counter initialCount={0} />);

    const button = screen.getByRole('button', { name: /increment/i });
    await user.click(button);

    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });

  it('使用正确的值调用 onChange 回调', async () => {
    const onChange = jest.fn();
    const user = userEvent.setup();

    render(<Counter initialCount={5} onChange={onChange} />);

    await user.click(screen.getByRole('button', { name: /increment/i }));

    expect(onChange).toHaveBeenCalledWith(6);
    expect(onChange).toHaveBeenCalledTimes(1);
  });

  it('达到最大计数时禁用按钮', () => {
    render(<Counter initialCount={10} maxCount={10} />);

    const button = screen.getByRole('button', { name: /increment/i });
    expect(button).toBeDisabled();
  });
});

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

describe('useCounter Hook', () => {
  it('使用默认值初始化', () => {
    const { result } = renderHook(() => useCounter(0));
    expect(result.current.count).toBe(0);
  });

  it('增加计数器', () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('减少计数器', () => {
    const { result } = renderHook(() => useCounter(5));

    act(() => {
      result.current.decrement();
    });

    expect(result.current.count).toBe(4);
  });

  it('重置为初始值', () => {
    const { result } = renderHook(() => useCounter(10));

    act(() => {
      result.current.increment();
      result.current.increment();
    });

    expect(result.current.count).toBe(12);

    act(() => {
      result.current.reset();
    });

    expect(result.current.count).toBe(10);
  });
});

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserProfile } from './UserProfile';
import * as api from './api';

jest.mock('./api');

describe('异步用户资料', () => {
  it('加载并显示用户数据', async () => {
    const mockUser = { id: 1, name: 'Alice', email: 'alice@example.com' };
    jest.mocked(api.fetchUser).mockResolvedValue(mockUser);

    render(<UserProfile userId={1} />);

    expect(screen.getByText('Loading...')).toBeInTheDocument();

    await waitFor(() => {
      expect(screen.getByText('Alice')).toBeInTheDocument();
    });

    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
  });

  it('获取失败时显示错误', async () => {
    jest.mocked(api.fetchUser).mockRejectedValue(new Error('Network error'));

    render(<UserProfile userId={1} />);

    await waitFor(() => {
      expect(screen.getByText(/error/i)).toBeInTheDocument();
    });
  });
});

import { render } from '@testing-library/react';
import { UserCard } from './UserCard';

describe('用户卡片快照', () => {
  it('普通用户匹配快照', () => {
    const { container } = render(
      <UserCard
        name="Alice"
        email="alice@example.com"
        role="user"
      />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('管理员用户匹配快照', () => {
    const { container } = render(
      <UserCard
        name="Bob"
        email="bob@example.com"
        role="admin"
      />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('使用内联快照', () => {
    const user = { id: 1, name: 'Charlie', role: 'user' };

    expect(user).toMatchInlineSnapshot(`
      {
        "id": 1,
        "name": "Charlie",
        "role": "user",
      }
    `);
  });
});

# 更新所有快照
jest --updateSnapshot
jest -u

# 更新特定测试文件的快照
jest UserCard.test.tsx -u

# 交互式快照更新
jest --watch
# 按 'u' 更新失败快照

自定义快照序列化器

// __tests__/serializers/dateSerializer.ts
export default {
  test: (val: any) => val instanceof Date,
  print: (val: Date) => `Date(${val.toISOString()})`,
};

jest.config.ts：

const config: Config = {
  snapshotSerializers: ['<rootDir>/__tests__/serializers/dateSerializer.ts'],
};

import { fetchData, saveData } from './api';

describe('异步操作', () => {
  it('使用数据解析', async () => {
    const data = await fetchData(1);
    expect(data).toBeDefined();
    expect(data.id).toBe(1);
  });

  it('处理 Promise 拒绝', async () => {
    await expect(fetchData(-1)).rejects.toThrow('Invalid ID');
  });

  it('使用 resolves 匹配器', async () => {
    await expect(fetchData(1)).resolves.toHaveProperty('id', 1);
  });

  it('测试多个异步操作', async () => {
    const [user, posts] = await Promise.all([
      fetchUser(1),
      fetchPosts(1),
    ]);

    expect(user.id).toBe(1);
    expect(posts).toHaveLength(expect.any(Number));
  });
});

describe('回调测试', () => {
  it('使用正确的参数调用回调', (done) => {
    function fetchWithCallback(id: number, callback: (data: any) => void) {
      setTimeout(() => {
        callback({ id, name: 'Test' });
      }, 100);
    }

    fetchWithCallback(1, (data) => {
      try {
        expect(data.id).toBe(1);
        expect(data.name).toBe('Test');
        done();
      } catch (error) {
        done(error);
      }
    });
  });
});

高级覆盖率设置

jest.config.ts：

const config: Config = {
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageProvider: 'v8', // 或使用 'babel' 以获得兼容性
  coverageReporters: ['text', 'lcov', 'html', 'json'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.test.{ts,tsx}',
    '!src/**/__tests__/**',
    '!src/index.ts',
    '!src/types/**',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
    './src/core/': {
      branches: 90,
      functions: 90,
      lines: 90,
      statements: 90,
    },
  },
  coveragePathIgnorePatterns: [
    '/node_modules/',
    '/dist/',
    '/__tests__/',
  ],
};

# 生成覆盖率报告
npm test -- --coverage

# 监视模式下的覆盖率
npm test -- --coverage --watch

# 特定文件的覆盖率
npm test -- --coverage --collectCoverageFrom="src/components/**/*.tsx"

# 查看 HTML 报告
open coverage/lcov-report/index.html

// Vitest
import { vi } from 'vitest';
const mockFn = vi.fn();
vi.spyOn(obj, 'method');

// Jest
import { jest } from '@jest/globals';
const mockFn = jest.fn();
jest.spyOn(obj, 'method');

1. 更新依赖：

npm uninstall vitest @vitest/ui
npm install -D jest @types/jest ts-jest

2. 更新 package.json：

{
  "scripts": {
    "test": "jest",           // 之前是: vitest run
    "test:watch": "jest --watch"  // 之前是: vitest
  }
}

3. 将 vitest.config.ts 替换为 jest.config.ts：

// 旧: vitest.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

// 新: jest.config.ts
import type { Config } from 'jest';
const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
  },
};
export default config;

4. 更新测试文件：

// 更改导入
- import { vi } from 'vitest';
+ import { jest } from '@jest/globals';

// 更新模拟
- vi.fn()
+ jest.fn()

- vi.spyOn()
+ jest.spyOn()

- vi.mock()
+ jest.mock()

// 定时器模拟
- vi.useFakeTimers()
+ jest.useFakeTimers()

- vi.advanceTimersByTime()
+ jest.advanceTimersByTime()

5. 更新 tsconfig.json：

{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]  // 之前是: vitest/globals
  }
}

Jest 与 Vitest 对比

初始启动较慢（无 HMR）
默认顺序执行测试
中型项目需要 1-5 秒

基于 HMR 的即时执行
默认并行执行
相同项目需要 100-500 毫秒

✅ 70% 市场份额
✅ 成熟生态系统（8 年以上）
✅ 更多 Stack Overflow 答案
✅ 更好的企业支持

✅ 现代化，采用率不断增长
✅ 原生 Vite 集成
⚠️ 较小的生态系统
⚠️ 资源较少

需要 ts-jest 配置
额外的转换步骤
编译较慢

内置 TypeScript 支持
无需配置
通过 Vite 实现更快速度

在以下情况下选择 Jest：

✅ 已在使用 Jest 的现有项目
✅ 需要经过验证工具的企业环境
✅ 需要广泛生态系统支持的项目
✅ 使用 Create React App 的 React 项目
✅ 非 Vite 构建系统（Webpack、Rollup）

在以下情况下选择 Vitest：

✅ 使用现代工具的新项目
✅ 基于 Vite 的应用程序
✅ 性能关键的测试套件
✅ ESM 优先的项目

使用 TypeScript 配置：类型安全的测试可防止运行时错误
模拟外部依赖：网络、文件系统、数据库
隔离测试：每个测试应独立
使用 describe 块：逻辑上分组相关测试
清理模拟状态：在 beforeEach 中使用 jest.clearAllMocks()
测试边界情况：空数组、null、undefined、错误
使用 .each 进行数据驱动测试：高效测试多个输入
避免测试实现细节：测试行为，而非内部结构
保持测试快速：模拟慢速操作，使用并行执行
维护覆盖率阈值：在 CI 中强制执行最低覆盖率

❌ 测试之间未清理模拟：

// 错误 - 模拟在测试之间泄漏
it('test 1', () => {
  jest.spyOn(api, 'fetch');
  // 没有清理！
});

// 正确
afterEach(() => {
  jest.restoreAllMocks();
});

❌ 忘记等待异步测试：

// 错误 - 断言前测试已完成
it('fetches data', () => {
  fetchData().then(data => {
    expect(data).toBeDefined();  // 永远不会运行！
  });
});

// 正确
it('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});

❌ 使用错误的测试环境：

// 错误 - 没有 jsdom 的情况下测试 DOM
// jest.config.ts
testEnvironment: 'node',  // 无法测试 React！

// 正确
testEnvironment: 'jsdom',

❌ 未为模拟使用 TypeScript 类型：

// 错误 - 没有类型安全
const mockFn = jest.fn();

// 正确
const mockFn = jest.fn<(id: number) => Promise<User>>();

使用 Jest 时，请考虑这些补充技能：

typescript-core：高级 TypeScript 模式、tsconfig 优化和类型安全
react：使用 Testing Library 的 React 组件测试模式
vitest：具有 Vite 原生性能和更快执行的现代替代方案

快速 TypeScript 类型安全参考（内联以供独立使用）

// 使用泛型的类型安全测试辅助函数
function createMockUser<T extends Partial<User>>(overrides: T): User & T {
  return {
    id: 1,
    name: 'Test User',
    email: 'test@example.com',
    ...overrides
  };
}

// 使用类型推断
const adminUser = createMockUser({ role: 'admin' });
// 类型: User & { role: string }

// 类型安全的模拟函数
const mockFetch = jest.fn<typeof fetch>();
mockFetch.mockResolvedValue(new Response('{}'));

// 用于字面量类型的常量类型参数
const createConfig = <const T extends Record<string, unknown>>(config: T): T => config;
const testConfig = createConfig({ environment: 'test', debug: true });
// 类型: { environment: "test"; debug: true }（保留字面量）

快速 React 测试模式（内联以供独立使用）

// 使用 Jest 的 React Testing Library
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

// 组件测试模式
describe('UserProfile', () => {
  it('应该显示用户信息', () => {
    const user = { id: 1, name: 'Alice', email: 'alice@example.com' };
    render(<UserProfile user={user} />);

    expect(screen.getByText('Alice')).toBeInTheDocument();
    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
  });

  it('应该处理用户交互', async () => {
    const onSubmit = jest.fn();
    render(<UserForm onSubmit={onSubmit} />);

    // 用户交互
    await userEvent.type(screen.getByLabelText('Name'), 'Bob');
    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({ name: 'Bob' });
    });
  });
});

// Hook 测试
import { renderHook, act } from '@testing-library/react';

test('useCounter hook', () => {
  const { result } = renderHook(() => useCounter(0));

  expect(result.current.count).toBe(0);

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

// 上下文和 Provider 测试
const wrapper = ({ children }: { children: React.ReactNode }) => (
  <AuthProvider>{children}</AuthProvider>
);

test('useAuth hook with context', () => {
  const { result } = renderHook(() => useAuth(), { wrapper });
  expect(result.current.user).toBeDefined();
});

快速 Vitest 对比（内联以供独立使用）

何时选择 Vitest 而非 Jest：

新的 Vite/基于 Vite 的项目（使用 Turbopack 的 Next.js、SvelteKit）
需要更快的测试执行（快 10-100 倍）
ESM 优先架构
测试的热模块替换

何时坚持使用 Jest：

已配置 Jest 的现有大型代码库
具有已建立 Jest 工作流程的企业环境
需要成熟生态系统和丰富插件
使用 Create React App 的 React 应用（默认 Jest 设置）

迁移代码片段（Jest → Vitest）：

// Jest: 从 '@testing-library/jest-dom' 导入
import '@testing-library/jest-dom';

// Vitest: 从 vitest globals 导入
import { expect, test, describe } from 'vitest';
import { screen } from '@testing-library/react';

// 大多数 Jest 语法在 Vitest 中保持不变
test('component renders', () => {
  render(<Component />);
  expect(screen.getByText('Hello')).toBeTruthy();
});

[完整的 TypeScript、React 和 Vitest 模式可在部署时在各自的技能中找到]

Jest 是占据 70% 市场份额的行业标准
TypeScript 支持：通过 ts-jest 实现完整的类型安全
一体化解决方案：测试运行器、断言、模拟、覆盖率
React Testing Library 集成用于组件测试
成熟生态系统：丰富的工具和支持
快照测试：用于 UI 回归测试
迁移路径：从 Vitest 迁移，具有兼容的 API
适用于：现有项目、企业环境、React 应用、遗留支持
权衡：比 Vitest 慢，但更成熟且支持更广泛

🇺🇸English

Jest + TypeScript - Industry Standard Testing

Overview

Jest is the industry-standard testing framework with 70% market share, providing a mature, battle-tested ecosystem for TypeScript projects. It offers comprehensive testing capabilities with built-in snapshot testing, mocking, and coverage reporting.

Key Features :

🏆 Industry Standard : 70% market share, widely adopted
📦 All-in-One : Test runner, assertions, mocks, coverage in one package
📸 Snapshot Testing : Built-in snapshot support for UI testing
🧪 React Integration : React Testing Library, enzyme compatibility
🔧 Mature Ecosystem : Extensive plugins, tooling, and community support
🎯 TypeScript Support : Full type safety via ts-jest
🔍 Coverage Reports : Built-in Istanbul coverage
🌐 Multi-Platform : Node.js, browser (jsdom), React Native

Installation :

npm install -D jest @types/jest ts-jest
npm install -D @testing-library/react @testing-library/jest-dom  # For React

Basic Setup

1. Initialize Jest Configuration

npx ts-jest config:init

This creates jest.config.js :

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

2. Manual Configuration

jest.config.ts (TypeScript config):

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src'],
  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.test.{ts,tsx}',
    '!src/**/__tests__/**',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

export default config;

3. TypeScript Configuration

tsconfig.json :

{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"],
    "esModuleInterop": true
  }
}

tsconfig.test.json (test-specific):

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["jest", "node", "@testing-library/jest-dom"]
  },
  "include": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/__tests__/**"]
}

4. Package.json Scripts

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:ci": "jest --ci --coverage --maxWorkers=2"
  }
}

Core Testing Patterns

Basic Test Structure

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

describe('Calculator', () => {
  let calculator: Calculator;

  beforeEach(() => {
    calculator = new Calculator();
  });

  afterEach(() => {
    // Cleanup
  });

  it('adds two numbers correctly', () => {
    const result = calculator.add(2, 3);
    expect(result).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(calculator.add(-5, 3)).toBe(-2);
  });

  it.each([
    [1, 1, 2],
    [2, 3, 5],
    [10, -5, 5],
  ])('adds %i + %i to equal %i', (a, b, expected) => {
    expect(calculator.add(a, b)).toBe(expected);
  });
});

TypeScript Type-Safe Tests

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

describe('User Service', () => {
  it('creates user with correct types', () => {
    const user: User = {
      id: 1,
      name: 'Alice',
      email: 'alice@example.com',
      role: 'admin',
    };

    // Type-safe assertions
    expect(user.id).toEqual(expect.any(Number));
    expect(user.name).toEqual(expect.any(String));
    expect(user.role).toMatch(/^(admin|user)$/);
  });

  it('validates user object shape', () => {
    const user = createUser('Bob', 'bob@example.com');

    expect(user).toMatchObject({
      id: expect.any(Number),
      name: 'Bob',
      email: 'bob@example.com',
    });
  });
});

Mocking with TypeScript

jest.mock for Module Mocking

import { jest } from '@jest/globals';
import { UserService } from './UserService';
import * as userApi from './api/userApi';

// Mock entire module
jest.mock('./api/userApi');

describe('UserService with Mocks', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('fetches user data', async () => {
    const mockUser = { id: 1, name: 'Alice', email: 'alice@example.com' };

    // Type-safe mock
    const mockedFetchUser = jest.mocked(userApi.fetchUser);
    mockedFetchUser.mockResolvedValue(mockUser);

    const service = new UserService();
    const user = await service.getUser(1);

    expect(mockedFetchUser).toHaveBeenCalledWith(1);
    expect(user).toEqual(mockUser);
  });
});

jest.spyOn for Method Spying

import { jest } from '@jest/globals';

class Logger {
  log(message: string): void {
    console.log(message);
  }

  error(message: string): void {
    console.error(message);
  }
}

describe('Logger Spy', () => {
  let logger: Logger;
  let logSpy: jest.SpyInstance;

  beforeEach(() => {
    logger = new Logger();
    logSpy = jest.spyOn(logger, 'log');
  });

  afterEach(() => {
    logSpy.mockRestore();
  });

  it('tracks method calls', () => {
    logger.log('Hello');
    logger.log('World');

    expect(logSpy).toHaveBeenCalledTimes(2);
    expect(logSpy).toHaveBeenCalledWith('Hello');
    expect(logSpy).toHaveBeenLastCalledWith('World');
  });

  it('provides custom implementation', () => {
    logSpy.mockImplementation((msg: string) => {
      console.log(`[CUSTOM] ${msg}`);
    });

    logger.log('Test');
    expect(logSpy).toHaveBeenCalledWith('Test');
  });
});

Type-Safe Mock Functions

import { jest } from '@jest/globals';

interface ApiResponse<T> {
  data: T;
  status: number;
}

type FetchUserFn = (id: number) => Promise<ApiResponse<User>>;

describe('Type-Safe Mocks', () => {
  it('creates typed mock function', async () => {
    const mockFetchUser = jest.fn<FetchUserFn>()
      .mockResolvedValue({
        data: { id: 1, name: 'Alice', email: 'alice@example.com', role: 'user' },
        status: 200,
      });

    const result = await mockFetchUser(1);

    expect(result.data.name).toBe('Alice');
    expect(result.status).toBe(200);
    expect(mockFetchUser).toHaveBeenCalledWith(1);
  });

  it('uses mock implementation', () => {
    const mockCalculate = jest.fn<(x: number, y: number) => number>()
      .mockImplementation((x, y) => x + y);

    expect(mockCalculate(5, 3)).toBe(8);
    expect(mockCalculate).toHaveBeenCalledWith(5, 3);
  });
});

Mocking Timers

import { jest } from '@jest/globals';

describe('Timer Mocking', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.useRealTimers();
  });

  it('fast-forwards time', () => {
    const callback = jest.fn();
    setTimeout(callback, 1000);

    jest.advanceTimersByTime(500);
    expect(callback).not.toHaveBeenCalled();

    jest.advanceTimersByTime(500);
    expect(callback).toHaveBeenCalledTimes(1);
  });

  it('runs all timers', () => {
    const callback = jest.fn();
    setTimeout(callback, 1000);
    setTimeout(callback, 2000);

    jest.runAllTimers();
    expect(callback).toHaveBeenCalledTimes(2);
  });

  it('handles intervals', () => {
    const callback = jest.fn();
    setInterval(callback, 1000);

    jest.advanceTimersByTime(3500);
    expect(callback).toHaveBeenCalledTimes(3);

    jest.clearAllTimers();
  });
});

React Testing Library + TypeScript

Setup for React

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D jest-environment-jsdom

jest.config.ts (React):

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
  transform: {
    '^.+\\.tsx?$': ['ts-jest', {
      tsconfig: {
        jsx: 'react-jsx',
      },
    }],
  },
};

export default config;

src/test/setup.ts :

import '@testing-library/jest-dom';
import { cleanup } from '@testing-library/react';
import { afterEach } from '@jest/globals';

afterEach(() => {
  cleanup();
});

React Component Testing

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Counter } from './Counter';

describe('Counter Component', () => {
  it('renders initial count', () => {
    render(<Counter initialCount={0} />);
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
  });

  it('increments counter on button click', async () => {
    const user = userEvent.setup();
    render(<Counter initialCount={0} />);

    const button = screen.getByRole('button', { name: /increment/i });
    await user.click(button);

    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });

  it('calls onChange callback with correct value', async () => {
    const onChange = jest.fn();
    const user = userEvent.setup();

    render(<Counter initialCount={5} onChange={onChange} />);

    await user.click(screen.getByRole('button', { name: /increment/i }));

    expect(onChange).toHaveBeenCalledWith(6);
    expect(onChange).toHaveBeenCalledTimes(1);
  });

  it('disables button when max count reached', () => {
    render(<Counter initialCount={10} maxCount={10} />);

    const button = screen.getByRole('button', { name: /increment/i });
    expect(button).toBeDisabled();
  });
});

Testing Hooks

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

describe('useCounter Hook', () => {
  it('initializes with default value', () => {
    const { result } = renderHook(() => useCounter(0));
    expect(result.current.count).toBe(0);
  });

  it('increments counter', () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('decrements counter', () => {
    const { result } = renderHook(() => useCounter(5));

    act(() => {
      result.current.decrement();
    });

    expect(result.current.count).toBe(4);
  });

  it('resets to initial value', () => {
    const { result } = renderHook(() => useCounter(10));

    act(() => {
      result.current.increment();
      result.current.increment();
    });

    expect(result.current.count).toBe(12);

    act(() => {
      result.current.reset();
    });

    expect(result.current.count).toBe(10);
  });
});

Testing Async Components

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserProfile } from './UserProfile';
import * as api from './api';

jest.mock('./api');

describe('UserProfile Async', () => {
  it('loads and displays user data', async () => {
    const mockUser = { id: 1, name: 'Alice', email: 'alice@example.com' };
    jest.mocked(api.fetchUser).mockResolvedValue(mockUser);

    render(<UserProfile userId={1} />);

    expect(screen.getByText('Loading...')).toBeInTheDocument();

    await waitFor(() => {
      expect(screen.getByText('Alice')).toBeInTheDocument();
    });

    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
  });

  it('displays error on fetch failure', async () => {
    jest.mocked(api.fetchUser).mockRejectedValue(new Error('Network error'));

    render(<UserProfile userId={1} />);

    await waitFor(() => {
      expect(screen.getByText(/error/i)).toBeInTheDocument();
    });
  });
});

Snapshot Testing

Component Snapshots

import { render } from '@testing-library/react';
import { UserCard } from './UserCard';

describe('UserCard Snapshots', () => {
  it('matches snapshot for regular user', () => {
    const { container } = render(
      <UserCard
        name="Alice"
        email="alice@example.com"
        role="user"
      />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('matches snapshot for admin user', () => {
    const { container } = render(
      <UserCard
        name="Bob"
        email="bob@example.com"
        role="admin"
      />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('uses inline snapshot', () => {
    const user = { id: 1, name: 'Charlie', role: 'user' };

    expect(user).toMatchInlineSnapshot(`
      {
        "id": 1,
        "name": "Charlie",
        "role": "user",
      }
    `);
  });
});

Updating Snapshots

# Update all snapshots
jest --updateSnapshot
jest -u

# Update snapshots for specific test file
jest UserCard.test.tsx -u

# Interactive snapshot update
jest --watch
# Press 'u' to update failing snapshots

Custom Snapshot Serializers

// __tests__/serializers/dateSerializer.ts
export default {
  test: (val: any) => val instanceof Date,
  print: (val: Date) => `Date(${val.toISOString()})`,
};

jest.config.ts :

const config: Config = {
  snapshotSerializers: ['<rootDir>/__tests__/serializers/dateSerializer.ts'],
};

Async Testing

Testing Promises

import { fetchData, saveData } from './api';

describe('Async Operations', () => {
  it('resolves with data', async () => {
    const data = await fetchData(1);
    expect(data).toBeDefined();
    expect(data.id).toBe(1);
  });

  it('handles promise rejection', async () => {
    await expect(fetchData(-1)).rejects.toThrow('Invalid ID');
  });

  it('uses resolves matcher', async () => {
    await expect(fetchData(1)).resolves.toHaveProperty('id', 1);
  });

  it('tests multiple async operations', async () => {
    const [user, posts] = await Promise.all([
      fetchUser(1),
      fetchPosts(1),
    ]);

    expect(user.id).toBe(1);
    expect(posts).toHaveLength(expect.any(Number));
  });
});

Testing Callbacks

describe('Callback Testing', () => {
  it('calls callback with correct arguments', (done) => {
    function fetchWithCallback(id: number, callback: (data: any) => void) {
      setTimeout(() => {
        callback({ id, name: 'Test' });
      }, 100);
    }

    fetchWithCallback(1, (data) => {
      try {
        expect(data.id).toBe(1);
        expect(data.name).toBe('Test');
        done();
      } catch (error) {
        done(error);
      }
    });
  });
});

Coverage Configuration

Advanced Coverage Setup

jest.config.ts :

const config: Config = {
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageProvider: 'v8', // or 'babel' for compatibility
  coverageReporters: ['text', 'lcov', 'html', 'json'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.test.{ts,tsx}',
    '!src/**/__tests__/**',
    '!src/index.ts',
    '!src/types/**',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
    './src/core/': {
      branches: 90,
      functions: 90,
      lines: 90,
      statements: 90,
    },
  },
  coveragePathIgnorePatterns: [
    '/node_modules/',
    '/dist/',
    '/__tests__/',
  ],
};

Running Coverage

# Generate coverage report
npm test -- --coverage

# Coverage with watch mode
npm test -- --coverage --watch

# Coverage for specific files
npm test -- --coverage --collectCoverageFrom="src/components/**/*.tsx"

# View HTML report
open coverage/lcov-report/index.html

Migration from Vitest

Key Differences

API Changes :

// Vitest
import { vi } from 'vitest';
const mockFn = vi.fn();
vi.spyOn(obj, 'method');

// Jest
import { jest } from '@jest/globals';
const mockFn = jest.fn();
jest.spyOn(obj, 'method');

Migration Checklist

1. Update Dependencies :

npm uninstall vitest @vitest/ui
npm install -D jest @types/jest ts-jest

2. Update package.json :

{
  "scripts": {
    "test": "jest",           // Was: vitest run
    "test:watch": "jest --watch"  // Was: vitest
  }
}

3. Replace vitest.config.ts with jest.config.ts :

// Old: vitest.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

// New: jest.config.ts
import type { Config } from 'jest';
const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
  },
};
export default config;

4. Update Test Files :

// Change imports
- import { vi } from 'vitest';
+ import { jest } from '@jest/globals';

// Update mocks
- vi.fn()
+ jest.fn()

- vi.spyOn()
+ jest.spyOn()

- vi.mock()
+ jest.mock()

// Timer mocks
- vi.useFakeTimers()
+ jest.useFakeTimers()

- vi.advanceTimersByTime()
+ jest.advanceTimersByTime()

5. Update tsconfig.json :

{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]  // Was: vitest/globals
  }
}

Jest vs Vitest Comparison

Performance

Jest :

Slower initial startup (no HMR)
Sequential test execution by default
1-5 seconds for medium projects

Vitest :

Instant HMR-based execution
Parallel by default
100-500ms for same projects

Ecosystem

Jest :

✅ 70% market share
✅ Mature ecosystem (8+ years)
✅ More Stack Overflow answers
✅ Better corporate support

Vitest :

✅ Modern, growing adoption
✅ Vite-native integration
⚠️ Smaller ecosystem
⚠️ Fewer resources

TypeScript Support

Jest :

Requires ts-jest configuration
Extra transform step
Slower compilation

Vitest :

Built-in TypeScript support
No configuration needed
Faster through Vite

When to Use Jest

Choose Jest for:

✅ Existing projects already using Jest
✅ Corporate environments requiring proven tools
✅ Projects requiring extensive ecosystem support
✅ React projects with Create React App
✅ Non-Vite build systems (Webpack, Rollup)

Choose Vitest for:

✅ New projects with modern tooling
✅ Vite-based applications
✅ Performance-critical test suites
✅ ESM-first projects

Best Practices

Use TypeScript Configuration : Type-safe tests prevent runtime errors
Mock External Dependencies : Network, file system, databases
Isolate Tests : Each test should be independent
Use describe Blocks : Group related tests logically
Clear Mock State : Use jest.clearAllMocks() in beforeEach
Test Edge Cases : Empty arrays, null, undefined, errors
Use .each for Data-Driven Tests : Test multiple inputs efficiently
Avoid Testing Implementation : Test behavior, not internal structure
Keep Tests Fast : Mock slow operations, use parallel execution
Maintain Coverage Thresholds : Enforce minimum coverage in CI

Common Pitfalls

❌ Not clearing mocks between tests :

// WRONG - mocks leak between tests
it('test 1', () => {
  jest.spyOn(api, 'fetch');
  // No cleanup!
});

// CORRECT
afterEach(() => {
  jest.restoreAllMocks();
});

❌ Forgetting to await async tests :

// WRONG - test completes before assertion
it('fetches data', () => {
  fetchData().then(data => {
    expect(data).toBeDefined();  // Never runs!
  });
});

// CORRECT
it('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});

❌ Using wrong test environment :

// WRONG - testing DOM without jsdom
// jest.config.ts
testEnvironment: 'node',  // Can't test React!

// CORRECT
testEnvironment: 'jsdom',

❌ Not using TypeScript types for mocks :

// WRONG - no type safety
const mockFn = jest.fn();

// CORRECT
const mockFn = jest.fn<(id: number) => Promise<User>>();

Resources

Documentation : https://jestjs.io/docs/getting-started
TypeScript Guide : https://jestjs.io/docs/getting-started#using-typescript
ts-jest : https://kulshekhar.github.io/ts-jest/
React Testing Library : https://testing-library.com/docs/react-testing-library/intro/
Jest DOM Matchers : https://github.com/testing-library/jest-dom

Related Skills

When using Jest, consider these complementary skills:

typescript-core : Advanced TypeScript patterns, tsconfig optimization, and type safety
react : React component testing patterns with Testing Library
vitest : Modern alternative with Vite-native performance and faster execution

Quick TypeScript Type Safety Reference (Inlined for Standalone Use)

// Type-safe test helpers with generics
function createMockUser<T extends Partial<User>>(overrides: T): User & T {
  return {
    id: 1,
    name: 'Test User',
    email: 'test@example.com',
    ...overrides
  };
}

// Usage with type inference
const adminUser = createMockUser({ role: 'admin' });
// Type: User & { role: string }

// Type-safe mock functions
const mockFetch = jest.fn<typeof fetch>();
mockFetch.mockResolvedValue(new Response('{}'));

// Const type parameters for literal types
const createConfig = <const T extends Record<string, unknown>>(config: T): T => config;
const testConfig = createConfig({ environment: 'test', debug: true });
// Type: { environment: "test"; debug: true } (literals preserved)

Quick React Testing Patterns (Inlined for Standalone Use)

// React Testing Library with Jest
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

// Component testing pattern
describe('UserProfile', () => {
  it('should display user information', () => {
    const user = { id: 1, name: 'Alice', email: 'alice@example.com' };
    render(<UserProfile user={user} />);

    expect(screen.getByText('Alice')).toBeInTheDocument();
    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
  });

  it('should handle user interactions', async () => {
    const onSubmit = jest.fn();
    render(<UserForm onSubmit={onSubmit} />);

    // User interactions
    await userEvent.type(screen.getByLabelText('Name'), 'Bob');
    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({ name: 'Bob' });
    });
  });
});

// Hook testing
import { renderHook, act } from '@testing-library/react';

test('useCounter hook', () => {
  const { result } = renderHook(() => useCounter(0));

  expect(result.current.count).toBe(0);

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

// Context and Provider testing
const wrapper = ({ children }: { children: React.ReactNode }) => (
  <AuthProvider>{children}</AuthProvider>
);

test('useAuth hook with context', () => {
  const { result } = renderHook(() => useAuth(), { wrapper });
  expect(result.current.user).toBeDefined();
});

Quick Vitest Comparison (Inlined for Standalone Use)

When to Choose Vitest over Jest:

New Vite/Vite-based projects (Next.js with Turbopack, SvelteKit)
Need faster test execution (10-100x faster)
ESM-first architecture
Hot Module Replacement for tests

When to Stick with Jest:

Existing large codebases with Jest already configured
Corporate environments with established Jest workflows
Need mature ecosystem and extensive plugins
React apps with Create React App (default Jest setup)

Migration Snippet (Jest → Vitest):

// Jest: import from '@testing-library/jest-dom'
import '@testing-library/jest-dom';

// Vitest: import from vitest globals
import { expect, test, describe } from 'vitest';
import { screen } from '@testing-library/react';

// Most Jest syntax works in Vitest unchanged
test('component renders', () => {
  render(<Component />);
  expect(screen.getByText('Hello')).toBeTruthy();
});

[Full TypeScript, React, and Vitest patterns available in respective skills if deployed together]

Summary

Jest is the industry standard with 70% market share
TypeScript support via ts-jest with full type safety
All-in-one solution : Test runner, assertions, mocks, coverage
React Testing Library integration for component testing
Mature ecosystem with extensive tooling and support
Snapshot testing for UI regression testing
Migration path from Vitest with compatible API
Perfect for : Existing projects, corporate environments, React apps, legacy support
Trade-off : Slower than Vitest but more mature and widely supported

Weekly Installs

253

Repository

bobmatnyc/claud…m-skills

GitHub Stars

First Seen

Jan 23, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

opencode212

gemini-cli208

codex196

github-copilot193

claude-code181

cursor180

Vue.js测试最佳实践：Vue 3组件、组合式函数、Pinia与异步测试完整指南

3,700 周安装

Jest TypeScript 测试配置指南 - 行业标准测试框架与TS集成教程

🇨🇳中文介绍

Jest + TypeScript - 行业标准测试

概述

基础设置

1. 初始化 Jest 配置

相关 Skills

2. 手动配置

3. TypeScript 配置

4. Package.json 脚本

核心测试模式

基础测试结构

TypeScript 类型安全测试

使用 TypeScript 进行模拟

jest.mock 用于模块模拟

jest.spyOn 用于方法监视

类型安全的模拟函数

模拟定时器

React Testing Library + TypeScript

React 设置

React 组件测试

测试 Hooks

测试异步组件

快照测试

组件快照

更新快照

自定义快照序列化器

异步测试

测试 Promise

测试回调函数

覆盖率配置

高级覆盖率设置

运行覆盖率

从 Vitest 迁移

主要差异

迁移清单

Jest 与 Vitest 对比

性能

生态系统

TypeScript 支持

何时使用 Jest

最佳实践

常见陷阱

资源

相关技能

快速 TypeScript 类型安全参考（内联以供独立使用）

快速 React 测试模式（内联以供独立使用）

快速 Vitest 对比（内联以供独立使用）

总结

🇺🇸English

Jest + TypeScript - Industry Standard Testing

Overview

Basic Setup

1. Initialize Jest Configuration

2. Manual Configuration

3. TypeScript Configuration

4. Package.json Scripts

Core Testing Patterns

Basic Test Structure

TypeScript Type-Safe Tests

Mocking with TypeScript

jest.mock for Module Mocking

jest.spyOn for Method Spying

Type-Safe Mock Functions

Mocking Timers

React Testing Library + TypeScript

Setup for React

React Component Testing

Testing Hooks

Testing Async Components

Snapshot Testing

Component Snapshots

Updating Snapshots

Custom Snapshot Serializers

Async Testing

Testing Promises

Testing Callbacks

Coverage Configuration

Advanced Coverage Setup

Running Coverage