测试与监控

测试金字塔

          ╱╲
         ╱  ╲          E2E 测试（少/慢）
        ╱    ╲         核心用户流程
       ╱─────────────────╲
      ╱                    ╲
     ╱     集成测试          ╲
    ╱    模块间交互、API     ╲
   ╱───────────────────────────╲
  ╱                               ╲
 ╱         单元测试（多/快）        ╲
╱     函数/组件/工具类的独立测试     ╲
╱─────────────────────────────────────╲

单元测试

Jest

基础结构

describe('功能模块描述', () => {
  test('具体测试场景', () => {
    // Arrange - 准备数据
    const input = 'hello';
    // Act - 执行操作
    const result = toUpperCase(input);
    // Assert - 断言结果
    expect(result).toBe('HELLO');
  });
});

匹配器（Matchers）

expect(2 + 2).toBe(4);                     // 引用相等（基本类型）
expect({ a: 1 }).toEqual({ a: 1 });        // 值相等（递归对比）
expect(null).toBeNull();
expect(undefined).toBeUndefined();
expect([1, 2, 3]).toContain(2);
expect('hello').toMatch(/ello/);
expect(fn).toHaveBeenCalledWith('param');
expect(Promise.resolve('ok')).resolves.toBe('ok');
expect(Promise.reject('err')).rejects.toThrow('err');

Mock 函数和 Spy

// jest.fn() — 创建模拟函数
const mockFn = jest.fn().mockReturnValue('fixed');
mockFn('a', 'b');
expect(mockFn).toHaveBeenCalledWith('a', 'b');
expect(mockFn.mock.calls.length).toBe(1);

// jest.spyOn — 监听已有方法
const spy = jest.spyOn(console, 'log').mockImplementation(() => {});
// 执行代码
console.log('test');
expect(spy).toHaveBeenCalledWith('test');
spy.mockRestore(); // 恢复原函数

// 模块 mock
jest.mock('axios');
import axios from 'axios';
axios.get.mockResolvedValue({ data: { id: 1 } });

Vitest

// Vitest 测试（API 与 Jest 几乎一致）
import { describe, it, expect, vi } from 'vitest';

describe('utils', () => {
  it('should work', () => {
    const fn = vi.fn();
    fn();
    expect(fn).toHaveBeenCalled();
  });
});

定时器假时间

// Jest
jest.useFakeTimers();
jest.advanceTimersByTime(3000); // 快进 3 秒

// Vitest
vi.useFakeTimers();
vi.advanceTimersByTime(3000);

Vue 组件测试（@vue/test-utils）

// MyButton.vue
<template>
  <button @click="$emit('click')" :class="{ active: isActive }">
    <slot />
  </button>
</template>

import { mount } from '@vue/test-utils';
import MyButton from './MyButton.vue';

test('emits click event', async () => {
  const wrapper = mount(MyButton, {
    slots: { default: 'Submit' },
    props: { isActive: false }
  });

  expect(wrapper.text()).toBe('Submit');
  expect(wrapper.classes()).not.toContain('active');

  await wrapper.trigger('click');
  expect(wrapper.emitted('click')).toBeTruthy();

  await wrapper.setProps({ isActive: true });
  expect(wrapper.classes()).toContain('active');
});

React 组件测试（React Testing Library）

设计哲学: 按用户行为测试，不测试实现细节（不关心 state 变化、不调用组件方法、不测试内部函数）。

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

test('form submission', async () => {
  render(<MyForm />);

  // 按标签查找
  const input = screen.getByLabelText('用户名');
  await userEvent.type(input, '张三');  // 模拟逐字输入

  const button = screen.getByRole('button', { name: /提交/i });
  await userEvent.click(button);

  // 等待异步操作
  await waitFor(() => {
    expect(screen.getByText('提交成功')).toBeInTheDocument();
  });
});

组件 / E2E 测试

Playwright

import { test, expect } from '@playwright/test';

test('用户登录流程', async ({ page }) => {
  await page.goto('https://example.com/login');

  // locator API（自动等待）
  await page.getByLabel('用户名').fill('admin');
  await page.getByLabel('密码').fill('password');
  await page.getByRole('button', { name: '登录' }).click();

  // 等待页面跳转
  await page.waitForURL('**/dashboard');
  await expect(page.getByText('欢迎回来')).toBeVisible();

  // 网络请求断言
  const response = await page.waitForResponse('**/api/user*');
  expect(response.status()).toBe(200);
});

// Trace Viewer 记录
test('with trace', async ({ page, context }) => {
  await context.tracing.start({ screenshots: true, snapshots: true });
  // ... 测试执行
  await context.tracing.stop({ path: 'trace.zip' });
});

Cypress

异步测试

// waitFor（React Testing Library）- 等待直到断言通过
await waitFor(() => {
  expect(screen.getByText('loaded')).toBeInTheDocument();
}, { timeout: 5000, interval: 100 });

// findBy - 隐式 waitFor
const element = await screen.findByText('loaded');

// act - 确保 React 状态更新被正确包装
await act(async () => {
  render(<MyComponent />);
  await userEvent.click(screen.getByRole('button'));
});

// Promise 断言
await expect(fetchData()).resolves.toEqual(expectedData);
await expect(fetchData()).rejects.toThrow('Network Error');

// 定时器假时间
jest.useFakeTimers();
jest.advanceTimersByTime(3000); // 快进 3 秒，跳过 setTimeout
expect(callback).toHaveBeenCalled();
jest.useRealTimers();

覆盖率

// Jest 配置覆盖率阈值
// jest.config.js
module.exports = {
  collectCoverage: true,
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 75,
      functions: 80,
      lines: 80,
    },
    './src/components/**': {
      statements: 90,
    }
  },
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.tsx',
  ],
};

错误监控

Sentry 集成

import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';

Sentry.init({
  dsn: 'https://xxx@sentry.io/xxx',
  environment: process.env.NODE_ENV,   // production/staging/development
  release: process.env.REACT_APP_VERSION,
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.2,               // 性能采样率

  // 面包屑—自动记录用户操作历史
  beforeBreadcrumb(breadcrumb, hint) {
    // 过滤掉不需要的 breadcrumb
    if (breadcrumb.category === 'xhr' && breadcrumb.data?.url?.includes('health')) {
      return null;
    }
    return breadcrumb;
  },
});

// 手动上报错误
try {
  dangerousOperation();
} catch (error) {
  Sentry.captureException(error);
}

// 设置用户上下文
Sentry.setUser({ id: 'user-123', email: 'user@example.com' });

Source Map 上传策略

构建 ──► 生成 .map 文件 ──► 上传到 Sentry（CI 中自动）
               │
               ▼
        不要发布到生产环境

# sentry-cli 自动上传
sentry-cli releases files $VERSION upload-sourcemaps ./dist --rewrite

生产环境不应提供 Source Map 文件（否则攻击者可还原源码）。安全做法: 上传到 Sentry（私有）后删除构建产物中的 .map 文件。

性能监控

Web Vitals 采集

import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,     // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,
    id: metric.id,             // 唯一标识，用于归因
  };
  // 发送到分析服务
  navigator.sendBeacon('/analytics', JSON.stringify(body));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

PerformanceObserver

// Long Task 检测
const longTaskObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    // 上报 > 50ms 的长任务
    console.warn('Long Task:', entry.duration, entry.attribution);
  });
});
longTaskObserver.observe({ type: 'longtask', buffered: true });

// Element Timing - 自定义元素渲染时间
const elementObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log('Element rendered:', entry.identifier, entry.renderTime);
  });
});
elementObserver.observe({ type: 'element', buffered: true });

自定义指标

可观测性

RUM vs Synthetic Monitoring

OpenTelemetry 分布式 Tracing

用户请求 ──► 浏览器 ──► API Gateway ──► 微服务 A ──► 微服务 B
    │          │            │              │              │
    └──────────┴────────────┴──────────────┴──────────────┘
                              ↑
                          traceId: abc-123
                   每个节点加入 traceId + spanId
                    形成完整的层级瀑布图

// 前端 OpenTelemetry 集成
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

const provider = new WebTracerProvider();
provider.register({
  contextManager: new ZoneContextManager(),
});

provider.addInstrumentation(
  new FetchInstrumentation({
    propagateTraceHeaderCorsUrls: /.*/,
  })
);