WebApp测试实战：从单元测试到端到端覆盖的完整技能指南

6次阅读

共计 1581 个字符，预计需要花费 4 分钟才能阅读完成。

去年我们团队遇到一个典型的支付流程故障：用户使用特定银行的信用卡支付时，系统会错误地重复扣款。事后复盘发现，问题出在第三方支付接口的异步回调处理上——我们只测试了成功支付的场景，却没有覆盖银行系统返回 处理中 状态码的情况。这个边界条件的遗漏，导致线上出现了严重的资损问题。

这个案例让我深刻意识到：没有完整的测试覆盖，就等于在代码里埋地雷。下面分享一套经过实战验证的 WebApp 测试方案。

聚焦最小代码单元（函数 / 类）
执行速度快（毫秒级）
适合验证业务逻辑纯度

针对 React/Vue 等 UI 组件
验证渲染结果和交互行为
需要 Mock 外部依赖

测试模块间的协作
部分依赖真实服务（如数据库）
关注接口契约

模拟真实用户操作流
覆盖完整技术栈
运行成本较高

// PaymentButton.test.tsx
import {render, screen, fireEvent} from '@testing-library/react';
import PaymentButton from './PaymentButton';

// Mock 支付服务
jest.mock('../services/payment', () => ({processPayment: jest.fn(() => Promise.resolve({success: true}))
}));

describe('PaymentButton', () => {test('点击后显示加载状态', async () => {render(<PaymentButton amount={100} />);

    // 初始状态验证
    const button = screen.getByText('立即支付');
    expect(button).toBeEnabled();

    // 模拟点击
    fireEvent.click(button);

    // 验证加载状态
    expect(button).toBeDisabled();
    expect(screen.getByText('处理中...')).toBeInTheDocument();

    // 等待异步操作完成
    await screen.findByText('支付成功');
  });
});

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  // 处理跨域 cookie
  cy.setCookie('auth_token', 'mock-token', {
    domain: '.yourdomain.com',
    secure: true
  });
});

// cypress/plugins/index.js
module.exports = (on, config) => {
  // 解决测试数据隔离
  on('task', {resetDatabase: () => {return execSync('npm run db:reset');
    }
  });
};