React受控表单测试中如何更简便地设置input输入值？

优化方案1：封装通用表单填充工具函数 #

把重复的表单赋值逻辑抽成可复用的工具函数，所有需要填充表单的测试用例直接调用即可，同时建议优化输入框定位逻辑，避免用下标取元素导致后续表单调整时测试批量失效：

1. 先给原Input组件的测试标识增加名称后缀，区分不同输入框：

<Input
  value={credentials.username}
  name="username"
  handleChange={handleChange}
  data-testid={`form-input-${name}`} // 新增该行
/>
<Input
  value={credentials.password}
  name="password"
  handleChange={handleChange}
  data-testid={`form-input-${name}`} // 新增该行
/>

2. 在测试文件中封装填充函数，推荐用@testing-library/user-event代替原生fireEvent，更贴近真实用户的输入行为，测试可信度更高：

// 可以放在当前测试文件顶部，也可以放到全局测试工具文件中全项目复用
import userEvent from '@testing-library/user-event'

const fillLoginForm = async (username: string, password: string) => {
  const usernameInput = screen.getByTestId('form-input-username')
  const passwordInput = screen.getByTestId('form-input-password')
  await userEvent.type(usernameInput, username)
  await userEvent.type(passwordInput, password)
}

3. 优化后的测试用例可以简化为：

it("should call handleSubmit in props when clicked", async () => {
  const handleSubmit = jest.fn()
  render(<LoginForm handleSubmit={handleSubmit} buttonText="button" />)
  // 一行完成表单填充
  await fillLoginForm("username", "pass")
  await userEvent.click(screen.getByText("button"))
  expect(handleSubmit).toHaveBeenCalledWith("username", "pass")
})

优化方案2：公共逻辑前置到钩子函数 #

如果同个测试集下多个用例都需要填充基础的合法表单值，可以把重复的渲染、填充逻辑放到beforeEach钩子中，进一步减少冗余代码：

describe('LoginForm 测试集', () => {
  const mockSubmit = jest.fn()
  const user = userEvent.setup()

  beforeEach(async () => {
    render(<LoginForm handleSubmit={mockSubmit} buttonText="button" />)
    // 所有用例默认填充好合法的账号密码
    await fillLoginForm("username", "pass")
  })

  it("提交时应该触发handleSubmit并传入正确参数", async () => {
    await user.click(screen.getByText("button"))
    expect(mockSubmit).toHaveBeenCalledWith("username", "pass")
  })

  it("账号为空时应该禁用提交按钮", async () => {
    // 特殊用例单独修改输入值即可
    await user.clear(screen.getByTestId('form-input-username'))
    expect(screen.getByText("button")).toBeDisabled()
  })
})

不推荐直接 mock useState 跳过输入流程的方案，这种方式脱离了组件真实交互逻辑，测试结果可信度很低，优先选择模拟用户真实操作的实现。

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