当前位置：首页 > React

react表单如何测试

2026-02-12 01:24:52React

测试 React 表单的方法

单元测试表单组件

使用 Jest 和 React Testing Library 测试表单组件的渲染和交互。模拟用户输入并验证组件状态变化。

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

test('should update input value on change', () => {
  const { getByLabelText } = render(<MyForm />);
  const input = getByLabelText('Username');
  fireEvent.change(input, { target: { value: 'testuser' } });
  expect(input.value).toBe('testuser');
});

测试表单验证逻辑

单独测试表单验证函数，确保验证规则按预期工作。

test('should validate email format', () => {
  expect(validateEmail('test@example.com')).toBe(true);
  expect(validateEmail('invalid')).toBe(false);
});

集成测试表单提交

模拟表单提交过程，验证是否正确处理提交事件和调用相关函数。

test('should call onSubmit with form data', () => {
  const mockSubmit = jest.fn();
  const { getByLabelText, getByText } = render(<MyForm onSubmit={mockSubmit} />);

  fireEvent.change(getByLabelText('Email'), { target: { value: 'test@example.com' } });
  fireEvent.click(getByText('Submit'));

  expect(mockSubmit).toHaveBeenCalledWith({ email: 'test@example.com' });
});

端到端测试

使用 Cypress 或类似的工具测试完整表单流程，包括导航、填写和提交。

describe('Form E2E Test', () => {
  it('should submit form successfully', () => {
    cy.visit('/form');
    cy.get('#email').type('test@example.com');
    cy.get('#submit').click();
    cy.url().should('include', '/success');
  });
});

测试表单可访问性

使用 axe-core 或其他可访问性测试工具确保表单符合无障碍标准。

import { axe } from 'jest-axe';

test('should have no accessibility violations', async () => {
  const { container } = render(<MyForm />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

快照测试

使用 Jest 的快照测试功能确保表单 UI 不会意外更改。

test('should match snapshot', () => {
  const { asFragment } = render(<MyForm />);
  expect(asFragment()).toMatchSnapshot();
});

测试表单性能

使用 React Profiler 或类似工具测量表单渲染和交互性能，确保没有不必要的重渲染。

test('should not re-render unnecessarily', () => {
  const mockRender = jest.fn();
  const { rerender } = render(<MyForm onRender={mockRender} />);
  rerender(<MyForm onRender={mockRender} />);
  expect(mockRender).toHaveBeenCalledTimes(1);
});

react表单如何测试