react表单如何测试
测试 React 表单的方法
单元测试表单组件
使用测试库（如 Jest + React Testing Library）测试表单组件的渲染和交互。验证输入框、按钮等元素是否存在，模拟用户输入并检查状态变化。
示例代码：
import { render, fireEvent } from '@testing-library/react';
test('input field updates on change', () => {
const { getByLabelText } = render(<MyForm />);
const input = getByLabelText('Username');
fireEvent.change(input, { target: { value: 'testuser' } });
expect(input.value).toBe('testuser');
});验证表单提交逻辑
模拟表单提交事件，检查是否调用正确的处理函数或 API。使用 jest.mock 模拟 API 调用，验证提交后的状态或行为。
示例代码：
test('form submits data correctly', async () => {
const mockSubmit = jest.fn();
const { getByText } = render(<MyForm onSubmit={mockSubmit} />);
fireEvent.click(getByText('Submit'));
expect(mockSubmit).toHaveBeenCalled();
});集成测试表单流程
结合端到端测试工具（如 Cypress）测试完整表单流程，包括导航、输入、提交和结果反馈。确保表单与后端和其他组件协同工作。
示例代码（Cypress）：
describe('Form Submission', () => {
it('fills and submits form', () => {
cy.visit('/form');
cy.get('#username').type('testuser');
cy.get('form').submit();
cy.url().should('include', '/success');
});
});测试表单验证规则
针对必填字段、格式校验等规则编写测试用例。模拟错误输入，验证错误提示是否显示。
示例代码：
test('shows error for empty field', () => {
const { getByText, getByLabelText } = render(<MyForm />);
fireEvent.blur(getByLabelText('Email'));
expect(getByText('Email is required')).toBeInTheDocument();
});快照测试
通过 Jest 的快照测试确保表单 UI 结构不会意外更改。捕获表单渲染的 DOM 结构，后续测试时会对比差异。
示例代码：
test('form matches snapshot', () => {
const { container } = render(<MyForm />);
expect(container).toMatchSnapshot();
});
