FE-13-前端测试：单元、集成、E2E

字数统计: 2.2k字   |   阅读时长≈ 11分

FE-13-前端测试：单元、集成、E2E

本节目标：掌握现代前端测试体系：单元测试（Vitest）、组件测试（Testing Library）、E2E（Playwright），能搭建完整测试流水线。

1. 测试金字塔

1
2
3
4
5
6
7
8
9
       /\
      /  \      E2E 测试（少量）
     /----\     慢、贵、覆盖关键路径
    /      \    
   /--------\   集成测试（适量）
  /          \  测组件、API 调用
 /------------\ 
/______________\ 单元测试（大量）
                 测函数、纯逻辑

比例建议：70% 单元 / 20% 集成 / 10% E2E

2. 单元测试：Vitest

Vitest = Jest 的现代替代，原生 ESM、TypeScript、速度快。

2.1 初始化

1
npm install -D vitest @vitest/ui
1
2
3
4
5
6
7
8
9
10
11
12
13
// vite.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,        // 不需要 import describe/it
    environment: 'jsdom', // 浏览器环境（测组件时）
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
    },
  },
});

2.2 基本测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// math.ts
export function add(a: number, b: number) {
  return a + b;
}

export function divide(a: number, b: number) {
  if (b === 0) throw new Error('Division by zero');
  return a / b;
}

// math.test.ts
import { describe, it, expect } from 'vitest';
import { add, divide } from './math';

describe('math', () => {
  it('adds two numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('divides', () => {
    expect(divide(10, 2)).toBe(5);
  });

  it('throws on divide by zero', () => {
    expect(() => divide(10, 0)).toThrow('Division by zero');
  });
});

2.3 表驱动测试

1
2
3
4
5
6
7
8
9
10
describe('add', () => {
  it.each([
    [1, 2, 3],
    [0, 0, 0],
    [-1, 1, 0],
    [100, 200, 300],
  ])('add(%i, %i) === %i', (a, b, expected) => {
    expect(add(a, b)).toBe(expected);
  });
});

2.4 Mock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { vi, describe, it, expect, beforeEach } from 'vitest';

// Mock 模块
vi.mock('./api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Alice' }),
}));

import { fetchUser } from './api';

describe('user', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('fetches user', async () => {
    const user = await fetchUser(1);
    expect(user).toEqual({ id: 1, name: 'Alice' });
  });

  it('verifies mock was called', async () => {
    await fetchUser(1);
    expect(fetchUser).toHaveBeenCalledWith(1);
  });
});

Mock 时间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { vi } from 'vitest';

vi.useFakeTimers();

it('debounces', () => {
  const fn = vi.fn();
  const debounced = debounce(fn, 1000);

  debounced();
  expect(fn).not.toHaveBeenCalled();

  vi.advanceTimersByTime(1000);
  expect(fn).toHaveBeenCalled();
});

2.5 Snapshot 测试

1
2
3
4
5
6
7
8
import { expect, it } from 'vitest';
import { render } from '@testing-library/react';
import Button from './Button';

it('renders correctly', () => {
  const { container } = render(<Button>Click</Button>);
  expect(container).toMatchSnapshot();
});

注意：快照是”防止意外变化”，不是”保证正确”。变更前要检查快照更新。

3. 组件测试：React Testing Library

RTL 的核心哲学：测用户行为，不测实现细节。

3.1 基本查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

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

  // 优先级：getByRole > getByLabelText > getByText > getByTestId
  const button = screen.getByRole('button', { name: /increment/i });
  expect(button).toHaveTextContent('0');

  await user.click(button);
  expect(button).toHaveTextContent('1');
});

3.2 异步操作

1
2
3
4
5
6
7
8
9
10
11
12
import { render, screen, waitFor } from '@testing-library/react';

it('loads user data', async () => {
  render(<UserProfile userId="1" />);

  // 初始显示 loading
  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  // 等待 user 出现
  const userName = await screen.findByText('Alice', {}, { timeout: 3000 });
  expect(userName).toBeInTheDocument();
});

3.3 表单测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
it('submits form with valid data', async () => {
  const user = userEvent.setup();
  const onSubmit = vi.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  await user.type(screen.getByLabelText(/email/i), 'alice@example.com');
  await user.type(screen.getByLabelText(/password/i), 'password123');
  await user.click(screen.getByRole('button', { name: /login/i }));

  expect(onSubmit).toHaveBeenCalledWith({
    email: 'alice@example.com',
    password: 'password123',
  });
});

3.4 上下文 Provider 包裹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function renderWithProviders(ui: React.ReactElement) {
  return render(
    <ThemeProvider theme="light">
      <UserProvider>
        <Router>{ui}</Router>
      </UserProvider>
    </ThemeProvider>,
  );
}

it('shows user name', () => {
  renderWithProviders(<UserProfile />);
  expect(screen.getByText('Alice')).toBeInTheDocument();
});

4. Hooks 测试

1
2
3
4
5
6
7
8
9
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

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

  act(() => result.current.increment());
  expect(result.current.count).toBe(1);
});

异步 hook：

1
2
3
4
5
6
7
8
9
import { renderHook, waitFor } from '@testing-library/react';

it('fetches data', async () => {
  const { result } = renderHook(() => useFetchUser(1));

  await waitFor(() => {
    expect(result.current.data).toEqual({ id: 1, name: 'Alice' });
  });
});

5. E2E 测试：Playwright

Playwright = 现代 E2E 框架，支持 Chromium、Firefox、WebKit。

5.1 初始化

1
2
npm install -D @playwright/test
npx playwright install
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

5.2 编写测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// e2e/login.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Login', () => {
  test('successful login', async ({ page }) => {
    await page.goto('/login');

    await page.getByLabel('Email').fill('alice@example.com');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Login' }).click();

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Welcome, Alice')).toBeVisible();
  });

  test('shows error for invalid credentials', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('wrong@example.com');
    await page.getByLabel('Password').fill('wrong');
    await page.getByRole('button', { name: 'Login' }).click();

    await expect(page.getByText('Invalid email or password')).toBeVisible();
  });
});

5.3 Page Object Model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// e2e/pages/LoginPage.ts
import type { Page } from '@playwright/test';

export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.getByLabel('Email').fill(email);
    await this.page.getByLabel('Password').fill(password);
    await this.page.getByRole('button', { name: 'Login' }).click();
  }
}

// e2e/login.spec.ts
import { LoginPage } from './pages/LoginPage';

test('login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('alice@example.com', 'pwd');
  await expect(page).toHaveURL('/dashboard');
});

5.4 视觉回归测试

1
2
3
4
5
6
7
test('homepage looks correct', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png', {
    fullPage: true,
    maxDiffPixels: 100,  // 允许小差异
  });
});

6. 服务端 Mock：MSW

MSW (Mock Service Worker) 拦截 fetch/XHR：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ]);
  }),

  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 3, ...body });
  }),
];

// mocks/browser.ts
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// test setup
import { beforeAll, afterEach, afterAll } from 'vitest';
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

export const restHandlers = [
  http.get('/api/user', () => HttpResponse.json({ id: 1, name: 'Alice' })),
];

const server = setupServer(...restHandlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

7. 覆盖率

1
2
3
4
5
6
7
8
9
10
# Vitest
vitest run --coverage
# 输出：
# --------------------|---------|----------|---------|---------|
# File                | % Stmts | % Branch | % Funcs | % Lines |
# --------------------|---------|----------|---------|---------|
# All files           |   85.5  |    78.2  |   90.0  |   85.5  |
# src/utils.ts        |     100 |      100 |     100 |     100 |
# src/components/...  |      80 |       75 |    85.0 |     80  |
# --------------------|---------|----------|---------|---------|

覆盖率目标：

  • 工具函数：90%+
  • 业务组件：70%+
  • 整体：70%+（不必追求 100%）

8. CI 集成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# .github/workflows/test.yml
name: Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install
      - run: pnpm test
      - run: pnpm test:coverage
      - run: pnpm exec playwright install --with-deps
      - run: pnpm test:e2e
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

9. 视觉回归：用 Chromatic

1
2
npm install -D chromatic
npx chromatic --project-token=<token>

Chromatic 在云端对比视觉变化，适合 UI 库。

10. 测试反模式

❌ 测实现细节：

1
2
3
4
5
6
// 错
expect(component.state.isOpen).toBe(true);
// 改了内部 state 名就挂

// 对
expect(screen.getByRole('dialog')).toBeVisible();

**❌ 测试覆盖率追求 100%**：

  • 配置类、类型定义、简单 getter 不需要测
  • 重点测业务逻辑

❌ E2E 测一切：

  • E2E 慢、贵、不稳定
  • 80% 单元 + 20% 集成 + 关键路径 E2E

❌ 快照过度依赖：

  • 大量快照 = 大量误报
  • 只对”稳定 UI”用快照

❌ 不测边界：

  • 空值、null、超长字符串、特殊字符
  • 并发、竞态、超时

实战：测试完整流程

1
2
3
4
5
6
7
8
9
10
1. 单元测试（开发时跑）
   pnpm vitest
   pnpm vitest --watch   # 监听模式

2. 组件测试（提交前）
   pnpm vitest run --coverage

3. E2E（PR 检查 + 部署前）
   pnpm playwright test
   pnpm playwright test --ui  # UI 模式

小结

测试类型 工具 速度 覆盖
单元 Vitest 极快 函数、纯逻辑
组件 RTL + Vitest 快 UI 交互、props
集成 Vitest + MSW 中 多个模块协作
E2E Playwright 慢 完整流程
视觉 Chromatic / Playwright snapshot 慢 UI 一致性
服务端 mock MSW — 替代真实 API

2026 推荐：

  • 单元/组件：Vitest + React Testing Library
  • E2E：Playwright（取代 Cypress）
  • API mock：MSW
  • 视觉回归：Chromatic（Storybook 集成）

核心原则：

  1. 测用户行为，不测实现
  2. 70/20/10 比例
  3. 测试要快（慢测试会被跳过）
  4. 不要追求 100% 覆盖率
  5. CI 必跑测试，没测试的代码别合并

下一节讲可访问性（a11y）与国际化（i18n）。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870