使用 React Testing Library 测试 Antd Form 组件

本文侧重于对 Form.useForm() 的处理，其返回值包含了Form组件数据管理的相关方法。文章来源地址https://uudwc.com/A/Ev3Do

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { Form } from 'antd';
import '@testing-library/jest-dom';
import { renderHook } from '@testing-library/react-hooks';
import userEvent from '@testing-library/user-event';

describe('antd Form组件测试', () => {
  test('Form submit', async () => {
    const user = userEvent.setup();

    // 创建一个真实的表单数据管理实例，由于 useForm 是一个hook方法，因此这里借助 renderHook 方法，详见React Hook 测试
    const { result } = renderHook(() => Form.useForm());
	// mock Form.useForm 的实现，使其直接使用我们上面创建的表单数据实例，这样可以让我们在测试代码中对Form表单进行数据上的修改
    jest.spyOn(Form, 'useForm').mockImplementation(() => result.current);

	// 组件内部使用 useForm
    render(<YourFormComponent />);

	// 填充表单数据
    result.current[0].setFieldsValue({
      job: '1',
      date: moment('2023-09-23'),
    });
	
	// 触发点击事件，提交表单信息
    await user.click(submitButton);
    // expect 根据表单数据做出断言即可
  });
});