react表单如何测试
测试 React 表单的方法
单元测试表单组件
使用 Jest 和 React Testing Library 对表单组件进行单元测试。测试内容包括表单渲染、输入框的交互以及提交按钮的行为。
import { render, fireEvent } from '@testing-library/react';
import MyForm from './MyForm';
test('form submits with correct data', () => {
const { getByLabelText, getByText } = render(<MyForm />);
const input = getByLabelText('Username');
fireEvent.change(input, { target: { value: 'testuser' } });
fireEvent.click(getByText('Submit'));
// 验证提交行为
});集成测试表单逻辑
测试表单与后端 API 的交互，可以使用 Mock Service Worker (MSW) 来模拟 API 请求。确保表单提交后能正确处理成功和失败的响应。
import { setupServer } from 'msw/node';
import { rest } from 'msw';
const server = setupServer(
rest.post('/api/submit', (req, res, ctx) => {
return res(ctx.json({ success: true }));
})
);
beforeAll(() => server.listen());
afterAll(() => server.close());端到端测试表单流程
使用 Cypress 或 Playwright 进行端到端测试，模拟用户从填写表单到提交的完整流程。测试包括表单验证、错误提示和成功提交后的页面跳转。
describe('Form E2E Test', () => {
it('should submit the form successfully', () => {
cy.visit('/form');
cy.get('input[name="username"]').type('testuser');
cy.get('form').submit();
cy.url().should('include', '/success');
});
});表单验证测试
确保表单验证逻辑正确，包括必填字段、格式验证和自定义验证规则。测试各种边界条件和非法输入。
test('shows error when username is empty', () => {
const { getByText } = render(<MyForm />);
fireEvent.click(getByText('Submit'));
expect(getByText('Username is required')).toBeInTheDocument();
});性能测试
测试表单在大数据量或复杂交互下的性能表现，确保没有明显的延迟或卡顿。可以使用 React Profiler 或 Lighthouse 进行分析。
import { unstable_trace as trace } from 'scheduler/tracing';
trace('form submission', performance.now(), () => {
// 表单提交逻辑
});
