为什么现代测试策略对构建坚不可摧的 Web 应用程序至关重要

Source: Dev.to

引言

测试不再是发布代码前的最后一道障碍；它是让我们能够自信构建、快速迭代而不至于把所有东西都弄坏的基石。现代测试为我们提供了在开发过程中自动且持续地验证 Web 应用每个部分的工具。

组件测试

在 React 应用中，最小的单元是组件——按钮、表单输入、卡片等。组件测试在隔离环境下验证这些部件，关注用户如何与它们交互，而不是内部实现细节。

示例：Button 组件

// Button.jsx
export const Button = ({ onClick, children, disabled = false }) => {
  return (
    
      {children}
    
  );
};

测试

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

describe('Button Component', () => {
  it('calls the onClick handler when clicked', () => {
    const mockClickHandler = jest.fn();

    render(Save);

    const buttonElement = screen.getByText('Save');
    fireEvent.click(buttonElement);

    expect(mockClickHandler).toHaveBeenCalledTimes(1);
  });

  it('is disabled and has proper aria attribute when disabled prop is true', () => {
    render( {}} disabled={true}>Submit);

    const buttonElement = screen.getByText('Submit');

    expect(buttonElement).toBeDisabled();
    expect(buttonElement).toHaveAttribute('aria-disabled', 'true');
  });
});

只要组件的外部行为保持不变，这些测试即使在内部逻辑修改后仍然可靠。

使用 Storybook 的视觉测试

组件往往会根据接收的数据呈现多种视觉状态。Storybook 提供了一个活的样式指南，能够展示并测试每一种状态。

示例：ProfileCard 故事

// ProfileCard.stories.jsx
import ProfileCard from './ProfileCard';

export default {
  title: 'Components/ProfileCard',
  component: ProfileCard,
};

export const Default = {
  args: {
    userName: 'Jane Doe',
    userAvatar: 'https://example.com/avatar.jpg',
    isLoading: false,
  },
};

export const Loading = {
  args: {
    isLoading: true,
  },
};

export const LongName = {
  args: {
    userName: 'Dr. Alexander Theophilius Montgomery III',
    userAvatar: 'https://example.com/avatar2.jpg',
    isLoading: false,
  },
};

将 Storybook 与自动化视觉快照测试相结合时，会把每个故事的截图与基准进行比较。如果 CSS 变化导致溢出或布局破坏，测试将失败并标出像素差异——这些是纯单元测试可能捕捉不到的 bug。

端到端（E2E）测试

把组件组合成页面和用户流程时，端到端（E2E）测试发挥最大作用。这类测试模拟真实用户在真实浏览器中的交互，覆盖导航、表单处理以及状态持久化。由于它们执行较慢且更易脆弱，通常只用于关键路径。

示例：使用 Playwright 的结账流程

// tests/checkout.spec.js
const { test, expect } = require('@playwright/test');

test('Complete user checkout flow', async ({ page }) => {
  // 1. Go to the product page
  await page.goto('https://myshop.example.com/products');

  // 2. Click on the first product
  await page.locator('[data-testid="product-card"]').first().click();

  // 3. Add it to the cart from the product detail page
  await page.locator('[data-testid="add-to-cart-button"]').click();

  // 4. Verify the cart counter updates
  const cartCount = page.locator('[data-testid="cart-count"]');
  await expect(cartCount).toHaveText('1');

  // 5. Go to the cart page
  await page.locator('[data-testid="cart-icon"]').click();

  // 6. Click the checkout button
  await page.locator('button:has-text("Proceed to Checkout")').click();

  // 7. Fill out the shipping form
  await page.fill('[data-testid="shipping-name"]', 'Alex Johnson');
  await page.fill('[data-testid="shipping-address"]', '123 Main St');
  // ... fill other fields

  // 8. Submit the form and confirm we reach the order summary
  await page.locator('[data-testid="submit-shipping"]').click();
  await expect(page.locator('[data-testid="order-summary"]')).toBeVisible();
  await expect(page).toHaveURL(/order-confirmation/);
});

当此测试通过时，我们对核心购买流程能够正常工作充满信心。在 CI 流水线中运行此类测试，可确保任何合并都不会破坏关键的用户旅程。

性能测试

性能对现代 Web 应用来说是不可妥协的。一个功能完整但加载缓慢的应用根本失去意义。提前集成性能检查——例如对关键页面以编程方式运行 Lighthouse——可以让团队强制执行性能预算（比如“首页的 Lighthouse 性能分数必须达到 90+”）。把性能视为一等测试关注点，能够在回归到达用户之前就将其捕获。