构建可靠的 Ant Design Landing 测试体系

在基于 Ant Design Landing 构建企业级落地页时，完善的测试策略是保障交付质量的核心。本文将深入探讨如何搭建从底层单元验证到顶层端到端（E2E）自动化的全链路测试架构，确保复杂页面组件的稳定性。

测试基础设施与环境适配

标准的 React 脚手架通常内置了 Jest，但在 Ant Design Landing 项目中，由于大量使用了 Less 预处理器及组件按需加载机制，直接运行默认测试脚本会导致样式解析报错。我们需要引入配置覆盖工具（如 craco）来接管并扩展测试环境。

调整 package.json 中的执行脚本，以支持自定义配置和覆盖率收集：

{
  "scripts": {
    "test:unit": "craco test",
    "test:coverage": "craco test --coverage --watchAll=false"
  }
}

组件级单元测试编写

单元测试聚焦于独立 UI 组件的渲染逻辑与交互行为。借助 React Testing Library，我们可以模拟真实的用户操作来验证组件输出。

验证导航组件渲染

针对顶部菜单栏组件，我们需要确保传入的配置数据能够正确转化为 DOM 节点：

import { render, screen } from '@testing-library/react';
import TopMenuBar from '../components/TopMenuBar';

const mockMenuConfig = {
  links: [
    { id: 'home', label: '主页', path: '/' },
    { id: 'features', label: '核心特性', path: '/features' }
  ]
};

describe('TopMenuBar Component', () => {
  it('should render all navigation links correctly', () => {
    render(<TopMenuBar config={mockMenuConfig} />);
    
    expect(screen.getByRole('link', { name: '主页' })).toHaveAttribute('href', '/');
    expect(screen.getByText('核心特性')).toBeVisible();
  });
});

验证交互事件触发

对于包含点击回调的操作按钮，测试重点在于事件绑定是否生效：

import { render, fireEvent } from '@testing-library/react';
import PrimaryActionButton from '../components/PrimaryActionButton';

describe('PrimaryActionButton Interactions', () => {
  it('should execute callback on user click', () => {
    const handleTrigger = jest.fn();
    const { getByRole } = render(<PrimaryActionButton onTrigger={handleTrigger} label="提交" />);
    
    fireEvent.click(getByRole('button'));
    expect(handleTrigger).toHaveBeenCalledTimes(1);
  });
});

页面级集成测试

集成测试用于检验多个组件组合后的页面结构以及路由跳转逻辑，确保模块间的协作符合预期。

页面布局完整性校验

验证落地页的主干结构是否完整渲染，包括页眉、主视觉区和页脚：

import { render, screen } from '@testing-library/react';
import LandingView from '../pages/LandingView';

describe('LandingView Layout Integration', () => {
  it('should compose all major page sections', () => {
    render(<LandingView />);
    
    expect(screen.getByRole('banner')).toBeInTheDocument();
    expect(screen.getByTestId('hero-banner')).toBeVisible();
    expect(screen.getByRole('main')).toBeInTheDocument();
    expect(screen.getByRole('contentinfo')).toBeInTheDocument();
  });
});

路由流转验证

结合 MemoryRouter 测试应用内部的页面跳转机制：

import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import AppRouter from '../AppRouter';

describe('Application Routing', () => {
  it('should navigate to the features page via menu click', () => {
    render(
      <MemoryRouter initialEntries={['/']}>
        <AppRouter />
      </MemoryRouter>
    );
    
    fireEvent.click(screen.getByText('核心特性'));
    expect(screen.getByTestId('features-view')).toBeInTheDocument();
  });
});

端到端 (E2E) 自动化测试

E2E 测试在真实浏览器环境中模拟用户的完整操作链路。这里采用 Cypress 来覆盖核心业务场景。

安装依赖并配置启动脚本：

npm install cypress --save-dev

编写 E2E 测试用例，覆盖从首页加载到子页面跳转的完整流程：

// cypress/e2e/landing-flow.cy.js
describe('Landing Page User Journey', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should verify critical UI elements and navigation flow', () => {
    cy.get('.top-menu-bar').should('be.visible');
    cy.get('[data-testid="hero-banner"]').should('contain.text', '欢迎使用');
    
    cy.contains('核心特性').click();
    cy.url().should('include', '/features');
    
    cy.get('[data-testid="features-view"]').should('exist');
  });
});

覆盖率收集与工程化最佳实践

为了维持长期的代码健康度，需要建立规范的测试文件组织方式并妥善处理外部依赖。

目录结构与数据隔离

推荐采用就近原则存放测试文件，并将公共 Mock 数据抽离至独立目录，避免测试用例间的数据污染：

src/
├── components/
│   ├── TopMenuBar/
│   │   ├── index.jsx
│   │   └── TopMenuBar.test.jsx
│   └── PrimaryActionButton/
│       ├── index.jsx
│       └── PrimaryActionButton.test.jsx
└── mocks/
    └── menuData.js

// src/mocks/menuData.js
export const defaultMenuConfig = {
  links: [
    { id: 'home', label: '主页', path: '/' },
    { id: 'features', label: '核心特性', path: '/features' }
  ]
};

拦截与模拟外部 API

在单元测试和集成测试中，必须拦截网络请求，使用 Jest 模拟后端接口返回，确保测试环境不受真实网络波动的影响：

jest.mock('../services/apiClient', () => ({
  fetchLandingData: jest.fn(() => Promise.resolve({ status: 200, payload: [] }))
}));