React Testing Library事件未触发：下拉选择后状态不更新

1. 核心问题：组件是否为受控组件？ #

React中，下拉框（select）的状态更新依赖受控组件绑定。如果你的组件没有将select的value与state绑定，也没有设置onChange回调，那么测试中选择选项后，组件状态不会同步更新，导致断言失败。

正确的受控组件写法应该是：

import { useState } from 'react';

function DnsSelector() {
  const [dnsMode, setDnsMode] = useState('auto'); // 初始化状态为auto

  return (
    <select
      id="dnsMode_GuiHelper2"
      className="form-select"
      value={dnsMode} // 绑定状态到value
      onChange={(e) => setDnsMode(e.target.value)} // 状态更新回调
    >
      <option value="auto">Search Domains (if available)</option>
      <option value="globalDNS">All Domains</option>
    </select>
  );
}

2. 调整测试代码写法 #

• 移除不必要的waitFor：userEvent.selectOptions本身是异步操作，会等待React状态更新完成，无需额外包裹waitFor
• 可直接选中对应option元素（更直观，避免值匹配问题）

修改后的测试代码：

const dropdown = screen.getByRole('combobox', {
  name: /Use DNS Server for/i
});
expect(dropdown).toHaveValue('auto');

// 方式1：通过值选择
await userEvent.selectOptions(dropdown, 'globalDNS');
expect(dropdown).toHaveValue('globalDNS');

// 方式2：通过option元素选择（更可靠）
// const globalDnsOption = screen.getByRole('option', { name: /All Domains/i });
// await userEvent.selectOptions(dropdown, globalDnsOption);
// expect(dropdown).toHaveValue('globalDNS');

3. 其他可能的排查点 #

• 检查userEvent版本：如果使用@testing-library/user-event v13及以下版本，selectOptions需要传递数组格式的参数：await userEvent.selectOptions(dropdown, ['globalDNS'])，建议升级到最新版本（v14+）
• 确认label关联正确：你的select没有name属性，getByRole能找到元素依赖对应的<label for="dnsMode_GuiHelper2">，确保label文本与正则/Use DNS Server for/i完全匹配

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