用Jest测试React表单onSubmit时，为何无法获取表单数据？

问题出在你对SyntheticBaseEvent的结构判断上——测试环境模拟的表单提交事件，不会像真实浏览器那样自动将表单控件以name为键挂载到event.target对象上。你原来的断言event.target.note在测试环境中是取不到值的，可通过以下两种方案解决：

方案一：通过FormData验证表单数据 #

这种方式更贴近真实业务中获取表单数据的逻辑，也能准确验证提交内容：

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

describe('NoteForm', () => {
  test('submits the correct note content', () => {
    const handleSubmit = jest.fn();
    render(<NoteForm handleNoteOnSubmit={handleSubmit} />);

    // 获取输入框（用RTL推荐的角色查询，比容器选择器更可靠）
    const noteInput = screen.getByRole('textbox');
    fireEvent.change(noteInput, { target: { value: 'testing a form...' } });

    // 触发表单提交
    fireEvent.submit(screen.getByRole('form'));

    // 验证处理函数被调用
    expect(handleSubmit).toHaveBeenCalled();

    // 从事件对象中提取表单数据
    const submitEvent = handleSubmit.mock.calls[0][0];
    const formData = new FormData(submitEvent.target);
    expect(formData.get('note')).toBe('testing a form...');
  });
});

方案二：通过表单元素集合验证 #

如果坚持用event.target.elements的方式断言，调整断言逻辑即可——表单控件实际存放在event.target.elements集合中：

// 替换原来的expect语句
expect(handleSubmit).toHaveBeenCalledWith(
  expect.objectContaining({
    target: expect.objectContaining({
      elements: expect.objectContaining({
        note: expect.objectContaining({
          value: 'testing a form...'
        })
      })
    })
  })
);

额外优化建议 #

1. 尽量使用React Testing Library推荐的查询方法（如screen.getByRole、screen.getByLabelText）替代container.querySelector，让测试更健壮，更贴近用户真实交互。
2. 如果表单有多个控件，用FormData的方式统一验证会更简洁，无需逐个断言控件属性。

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