如何使用Jest和Enzyme测试React中异步handleSubmit表单提交逻辑

没问题，我来帮你梳理下怎么用Jest测试这个绑定了异步handleSubmit的表单提交功能。核心思路是mock掉异步依赖（比如用户名校验接口），避免真实调用后端，同时覆盖不同逻辑分支，还要处理Jest的异步测试时机。

1. 先Mock异步依赖方法 #

因为你的handleSubmit依赖了异步的checkIfUsernameIsValid方法，测试时我们不需要真的调用后端接口，直接用Jest mock它的返回值即可：

// 模拟用户名可用的情况
jest.spyOn(AddItems.prototype, 'checkIfUsernameIsValid').mockResolvedValue(true);

// 模拟用户名已被使用的情况
jest.spyOn(AddItems.prototype, 'checkIfUsernameIsValid').mockResolvedValue(false);

2. 测试表单提交的核心逻辑 #

这里分两种常用的测试库来给你示例：React Testing Library（更推荐）和Enzyme。

用React Testing Library的示例 #

场景1：用户名可用，表单提交正常执行

test('表单提交时，用户名可用则顺利执行逻辑', async () => {
  // Mock用户名校验返回可用
  jest.spyOn(AddItems.prototype, 'checkIfUsernameIsValid').mockResolvedValue(true);
  
  // 渲染组件
  const { getByRole } = render(<AddItems />);
  const formElement = getByRole('form');
  
  // 模拟表单提交，因为是异步逻辑要加await
  await fireEvent.submit(formElement);
  
  // 验证handleSubmit被调用
  const handleSubmitSpy = jest.spyOn(AddItems.prototype, 'handleSubmit');
  await fireEvent.submit(formElement);
  expect(handleSubmitSpy).toHaveBeenCalled();
});

场景2：用户名已存在，表单触发错误处理

test('表单提交时，用户名已存在则显示错误提示', async () => {
  // Mock用户名校验返回不可用
  jest.spyOn(AddItems.prototype, 'checkIfUsernameIsValid').mockResolvedValue(false);
  
  const { getByRole, getByText } = render(<AddItems />);
  const formElement = getByRole('form');
  
  await fireEvent.submit(formElement);
  
  // 验证错误提示是否渲染（假设你的组件会显示"用户名已被使用"）
  expect(getByText('用户名已被使用')).toBeInTheDocument();
});

验证阻止默认表单行为

如果你需要确保e.preventDefault()被正确调用，可以传入一个mock事件对象：

test('表单提交时会阻止默认跳转行为', async () => {
  jest.spyOn(AddItems.prototype, 'checkIfUsernameIsValid').mockResolvedValue(true);
  
  const { getByRole } = render(<AddItems />);
  const formElement = getByRole('form');
  const mockPreventDefault = jest.fn();
  
  await fireEvent.submit(formElement, { preventDefault: mockPreventDefault });
  
  expect(mockPreventDefault).toHaveBeenCalled();
});

用Enzyme的示例 #

如果你还在使用Enzyme，写法类似：

test('异步handleSubmit测试：用户名可用时无错误', async () => {
  const wrapper = shallow(<AddItems />);
  // Mock用户名校验方法
  jest.spyOn(wrapper.instance(), 'checkIfUsernameIsValid').mockResolvedValue(true);
  
  // 更新组件实例，确保mock生效
  wrapper.instance().forceUpdate();
  
  // 模拟表单提交，传入mock的事件对象
  wrapper.find('Form').simulate('submit', { preventDefault: jest.fn() });
  
  // 等待异步逻辑完成
  await Promise.resolve();
  
  // 验证state里的错误是否为空（假设你的checkForErrors会把错误存在state）
  expect(wrapper.state('errors').username).toBeUndefined();
});

3. 测试后的清理 #

为了避免mock影响其他测试用例，建议在每个测试后清除mock：

afterEach(() => {
  jest.clearAllMocks();
});

内容的提问来源于stack exchange，提问作者Lennert Hofman