如何在Jest/RTL中通过属性名定位select DOM元素并测试值变更

你之前使用role: 'select'是错误的——原生<select>元素对应的ARIA role是combobox，并不存在名为select的ARIA角色。

如果你的<select>仅通过name="element"标识，没有关联的<label>或其他可访问名称，最直接的定位方式是使用byName查询（它会匹配表单元素的name属性）：

// 同步查询（元素已加载完成时）
const selectElement = screen.getByName('element');

// 异步查询（元素需要等待渲染时）
const selectElement = await screen.findByName('element');

如果坚持使用byRole查询，需要确保<select>有明确的可访问名称。你可以给元素添加aria-label属性：

<select name='element' aria-label='目标选择器'>
  <option value='1'>First element</option>
  <option value='2'>Second element</option>
  <option value='3'>Third element</option>
</select>

此时就能通过byRole定位：

const selectElement = await screen.findByRole('combobox', { name: '目标选择器' });

二、测试的值变更 # 推荐使用@testing-library/user-event模拟真实用户的选择操作，比fireEvent更贴近实际交互逻辑： import userEvent from '@testing-library/user-event'; // 初始化userEvent const user = userEvent.setup(); // 定位select元素 const selectElement = await screen.findByName('element'); // 选择value为'2'的选项 await user.selectOptions(selectElement, '2'); // 断言当前选中值 expect(selectElement).toHaveValue('2'); // 可选：断言选中的选项文本 expect(screen.getByText('Second element')).toBeSelected(); 如果使用fireEvent，写法如下： import { fireEvent } from '@testing-library/react'; const selectElement = await screen.findByName('element'); fireEvent.change(selectElement, { target: { value: '2' } }); expect(selectElement).toHaveValue('2'); 内容的提问来源于stack exchange，提问作者Sole