如何用React Testing Library测试受控复选框选中状态？

你遇到的核心问题是受控组件的测试逻辑不完整：

• 你的FormCheckBox是完全受控组件，checked值完全由传入的props.isChecked决定，组件自身不维护状态
• 测试中点击复选框后，虽然触发了onChange回调，但你并没有更新传入组件的isChecked属性，组件自然不会更新checked状态，所以最后断言checkbox.checked为true会失败
• 你提到的父组件同步更新是真实业务场景的逻辑，但测试环境里没有真实父组件维护状态，需要手动模拟这个流程

要让测试通过，需要在onChange触发后，更新isChecked的值并重新渲染组件，模拟真实父组件的状态更新逻辑。可以用react-testing-library提供的rerender方法实现。

it('checkbox must use fireEvent.click', async () => {
  const handleChange = jest.fn()
  let isChecked = false // 用变量维护测试状态
  const baseProps = {
    label: '测试复选框',
    error: undefined
    // 其他必要props
  }

  const { container, rerender } = render(
    <FormCheckBox {...baseProps} isChecked={isChecked} onChange={(val) => {
      handleChange(val)
      isChecked = val // 同步更新状态
    }} />
  )
  const checkbox = container.querySelectorAll("input[type='checkbox']")[0] as HTMLInputElement

  fireEvent.click(checkbox)
  expect(handleChange).toHaveBeenCalledTimes(1)
  expect(handleChange).toHaveBeenCalledWith(true)

  // 更新props并重新渲染组件
  rerender(
    <FormCheckBox {...baseProps} isChecked={isChecked} onChange={(val) => {
      handleChange(val)
      isChecked = val
    }} />
  )
  
  // 重新获取更新后的DOM元素
  const updatedCheckbox = container.querySelectorAll("input[type='checkbox']")[0] as HTMLInputElement
  expect(updatedCheckbox.checked).toBe(true)
})

• 推荐使用screen.getByRole('checkbox')获取复选框元素，比querySelector更符合react-testing-library的最佳实践，也更健壮
• 如果测试涉及异步状态更新，可以用waitFor包裹断言，但这里是同步更新props，用rerender更直接

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