React Testing Library测试：选Female时显示Age输入框报错求助

核心问题 #

测试报错的本质是：点击Female选项后，Age输入框并未实际渲染。问题出在自定义下拉框的状态同步逻辑和测试代码的等待时机上。

1. 修复自定义下拉框的状态同步 #

你的自定义下拉框没有把选中的选项值同步到gender字段，导致watch("gender")拿不到Female，条件渲染的Age输入框自然不会出现。

修改组件代码（以react-hook-form为例）：

import { useForm, watch } from "react-hook-form";

function YourForm() {
  const { register, watch, setValue } = useForm();
  const genderOption = watch("gender");

  // 点击选项时更新gender字段值
  const selectGender = (value) => {
    setValue("gender", value);
  };

  return (
    <form>
      {/* 绑定gender字段的值，设为只读避免手动输入 */}
      <input 
        {...register("gender")} 
        role="combobox" 
        value={genderOption || ""}
        readOnly
      />
      <button class="combobox-arrow"></button>
      <ul role="listbox">
        <li
          role="option"
          value="Male"
          onClick={() => selectGender("Male")}
        >
          <span>Male</span>
        </li>
        <li
          role="option"
          value="Female"
          onClick={() => selectGender("Female")}
        >
          <span>Female</span>
        </li>
      </ul>
      {/* 闭合标签，用div包裹条件渲染的元素（可选，避免DOM结构问题） */}
      {genderOption === "Female" && (
        <div>
          <label htmlFor="ageInput">Age</label>
          <input
            id="ageInput"
            type="text"
            name="Age"
            {...register("age")}
          />
        </div>
      )}
    </form>
  );
}

2. 修复测试代码的等待逻辑 #

点击选项后，组件状态更新、DOM重绘需要时间，同步的getByRole会在元素渲染前执行，导致找不到目标。换成异步查询方法即可：

import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import YourForm from './YourForm';

test('选择Female后显示Age输入框', async () => {
  render(<YourForm />);
  const user = userEvent.setup();

  // 点击展开下拉框
  const genderInput = screen.getByRole("combobox", { name: /gender/i });
  await user.click(genderInput);

  // 选择Female选项
  const femaleOption = screen.getByRole("option", { name: /female/i });
  await user.click(femaleOption);

  // 异步等待Age输入框渲染完成
  const ageElement = await screen.findByRole("textbox", { name: /age/i });
  expect(ageElement).toBeInTheDocument();
});

额外检查点 #

• 可以在组件里加console.log(genderOption)，确认选中Female后字段值是否正确更新
• 确保标签的htmlFor属性和输入框的id完全匹配（你的代码里是对的）
• 自定义下拉框的ARIA角色可以补充aria-controls属性，关联下拉列表的id，增强可访问性

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