Ant Design UI 测试方案选择指南

Ant Design (AntD) 作为企业级 React UI 组件库，其测试需要针对组件特性和交互行为进行专门设计。以下是针对 Ant Design 的 UI 测试全面解决方案。

一、测试策略选择

1. 测试金字塔应用

        E2E测试 (20%)
       /       \
      /         \
组件测试 (30%)   集成测试 (20%)
      \         /
       \       /
        单元测试 (30%)

2. AntD 测试重点

• 组件渲染：是否正确渲染了AntD组件
• 交互行为：表单、弹窗、菜单等交互
• 样式验证：布局、主题是否符合预期
• 无障碍访问：是否符合WCAG标准

二、单元/组件测试方案

1. Jest + React Testing Library (推荐组合)

npm install --save-dev @testing-library/react @testing-library/jest-dom jest

优势：

• 官方推荐的测试方式
• 接近用户视角的测试
• 与AntD兼容性好

示例测试：

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

test('AntD按钮点击测试', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>点击我</Button>);
  
  const button = screen.getByRole('button', { name: /点击我/i });
  fireEvent.click(button);
  
  expect(handleClick).toHaveBeenCalled();
  expect(button).toHaveClass('ant-btn');
});

2. 特定组件测试技巧

表单测试

import { Form, Input } from 'antd';

test('AntD表单验证', async () => {
  const { getByLabelText, getByText } = render(
    <Form>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input aria-label="username" />
      </Form.Item>
    </Form>
  );

  fireEvent.change(getByLabelText('username'), { 
    target: { value: '' } 
  });
  fireEvent.submit(getByText('Submit'));

  await waitFor(() => {
    expect(getByText('请输入用户名')).toBeInTheDocument();
  });
});

表格测试

test('AntD表格渲染', () => {
  const columns = [{ title: 'Name', dataIndex: 'name' }];
  const data = [{ key: '1', name: 'John' }];
  
  render(<Table columns={columns} dataSource={data} />);
  
  expect(screen.getByText('John')).toBeInTheDocument();
  expect(screen.getByRole('table')).toBeInTheDocument();
});

三、视觉回归测试

1. Storybook + Chromatic (推荐)

npm install --save-dev @storybook/react chromatic

配置示例 (.storybook/main.js):

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y' // 无障碍测试
  ]
};

优势：

• 可视化组件开发
• 自动捕捉UI变化
• 团队协作方便

2. Percy

npm install --save-dev @percy/cli @percy/storybook

集成到CI:

// package.json
{
  "scripts": {
    "test:visual": "percy storybook --widths=320,1280"
  }
}

四、端到端(E2E)测试方案

1. Cypress (最佳选择)

npm install --save-dev cypress @cypress/react

AntD专用命令 (cypress/support/commands.js):

Cypress.Commands.add('antdSelect', (selector, optionText) => {
  cy.get(selector).click();
  cy.get('.ant-select-dropdown')
    .not('.ant-select-dropdown-hidden')
    .contains(optionText)
    .click();
});

Cypress.Commands.add('antdTableShouldHaveData', (selector, data) => {
  cy.get(selector).find('tbody tr').should('have.length', data.length);
});

测试示例:

describe('AntD表单测试', () => {
  it('应成功提交表单', () => {
    cy.visit('/form');
    
    // 使用自定义命令操作AntD组件
    cy.antdSelect('#gender-select', '男');
    cy.get('#name-input').type('张三');
    
    cy.contains('提交').click();
    cy.contains('提交成功').should('be.visible');
  });
});

2. Playwright (现代替代方案)

npm install --save-dev @playwright/test

优势：

• 多浏览器支持
• 自动等待机制优秀
• 测试速度快

示例测试:

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

test('AntD模态框测试', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  await page.click('button:has-text("打开模态框")');
  await expect(page.locator('.ant-modal')).toBeVisible();
  
  await page.fill('.ant-modal input', '测试内容');
  await page.click('.ant-modal .ant-btn-primary');
  
  await expect(page.locator('.ant-modal')).not.toBeVisible();
});

五、无障碍(A11Y)测试

1. jest-axe

npm install --save-dev jest-axe @axe-core/react

测试示例:

import { axe, toHaveNoViolations } from 'jest-axe';
import { render } from '@testing-library/react';
import { Button } from 'antd';

expect.extend(toHaveNoViolations);

test('AntD按钮无障碍测试', async () => {
  const { container } = render(<Button>测试</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

2. Storybook a11y 插件

// .storybook/preview.js
export const decorators = [
  withA11y
];

六、测试策略建议

1. 组件分类测试法

2. CI/CD集成示例

# .github/workflows/test.yml
name: Test
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm ci
      
      # 单元测试
      - run: npm test -- --coverage
      
      # 组件测试
      - run: npm run test:components
      
      # E2E测试
      - run: npm run test:e2e
        env:
          CI: true
      
      # 视觉测试(仅在main分支)
      - if: github.ref == 'refs/heads/main'
        run: npm run test:visual
      
      # 上传覆盖率
      - uses: codecov/codecov-action@v1

七、常见问题解决方案

1. 测试AntD表单验证

test('表单验证测试', async () => {
  const { getByLabelText, findByText } = render(
    <Form>
      <Form.Item 
        name="email"
        rules={[{ type: 'email', message: '邮箱格式错误' }]}
      >
        <Input data-testid="email-input" />
      </Form.Item>
    </Form>
  );

  fireEvent.change(getByLabelText('email'), {
    target: { value: 'invalid-email' }
  });
  fireEvent.blur(getByLabelText('email'));

  expect(await findByText('邮箱格式错误')).toBeInTheDocument();
});

2. 测试AntD Table排序

test('表格排序测试', async () => {
  render(<YourTableComponent />);
  
  // 点击排序按钮
  fireEvent.click(screen.getByText('姓名'));
  
  await waitFor(() => {
    const firstRow = screen.getAllByRole('row')[1]; // 跳过表头
    expect(firstRow).toHaveTextContent('Andy');
  });
});

3. 测试AntD Modal

test('模态框测试', async () => {
  const { getByText, queryByRole } = render(<YourModalComponent />);
  
  // 打开模态框
  fireEvent.click(getByText('Open Modal'));
  
  // 验证内容
  expect(getByText('Modal Title')).toBeInTheDocument();
  
  // 关闭模态框
  fireEvent.click(getByText('OK'));
  
  await waitFor(() => {
    expect(queryByRole('dialog')).not.toBeInTheDocument();
  });
});

八、性能优化建议

1. Mock AntD图标：

// jest.setup.js
jest.mock('@ant-design/icons', () => ({
  __esModule: true,
  default: () => <span>MockIcon</span>,
  // 具体图标mock
  SearchOutlined: () => <span>SearchIcon</span>,
}));

1. 按需引入组件：

// 在测试配置中
jest.mock('antd', () => {
  const antd = jest.requireActual('antd');
  return {
    ...antd,
    // 只mock特定组件
    Select: jest.fn().mockImplementation(({ children, ...props }) => {
      return <select {...props}>{children}</select>;
    }),
  };
});

通过以上方案，您可以构建全面的Ant Design UI测试体系，确保组件的功能、交互和视觉表现符合预期。根据项目规模和团队偏好，可以灵活调整测试工具的组合和使用比例。