React列表渲染场景下react-testing-library无法定位data-testid元素

问题原因 #

这个问题是两个核心因素共同导致的：

1. 下拉选项默认未挂载：你使用的Ant Design Select组件默认处于收起状态，下拉面板（包含所有选项对应的DOM节点）不会在初始渲染时挂载到页面中，刚执行完render时DOM树里根本不存在选项节点。
2. 自定义属性不会被透传：<Option>本身是逻辑配置组件，不会直接渲染为真实DOM，作用只是给父级Select组件传递选项配置。你在Option上添加的非官方支持的自定义属性（比如data-testid），不会被Select透传到最终渲染的下拉选项DOM节点上，就算手动打开下拉，也找不到带这个testid的元素。

另外你在map循环里给Option套了一层无key的空Fragment，属于冗余写法，会触发React key警告，和本次元素定位失败无关但建议移除。

解决方案 #

优先遵循react-testing-library的推荐原则，从用户交互视角编写测试，不要强依赖testid定位选项：

1. 首先模拟用户点击Select选择框，触发下拉面板展开，等待选项渲染完成
2. 优先通过选项的可见文本定位元素，这也是最贴近用户真实使用场景的查询方式

修正后的测试代码如下：

it('should render option destination', async () => {
  render(<Search destinations={[{ id: 1, name: 'Test' }]} />);
  // 模拟用户点击Select，打开下拉面板
  const selectTrigger = screen.getByPlaceholderText(t('search.destination.place_holder'));
  userEvent.click(selectTrigger);
  // 等待选项渲染完成，通过可见文本断言
  expect(await screen.findByText('Test')).toBeInTheDocument();
});

如果你确实需要通过testid定位选项，可以改用Select的options配置项传参（替换Option子元素写法），AntD v5版本会自动将选项上的data-*属性透传到渲染的DOM节点上，组件写法参考：

<Select
  className="search-form__item__field"
  allowClear
  bordered={false}
  style={{ border: 'none' }}
  placeholder={t('search.destination.place_holder')}
  showArrow
  options={destinations?.map(item => ({
    value: item.id,
    label: item.name,
    'data-testid': 'option-search-destination'
  }))}
/>

对应的测试用例同样需要先模拟点击打开下拉，再等待元素出现即可完成断言。

内容的提问来源于stack exchange，提问作者Khoa Duong Dang