React中getByLabelText无法识别带<sup>的表单标签问题求助

问题原因 #

你的<label>中，*被包裹在<sup>标签里，并非和"Choose date"处于同一文本节点。而getByLabelText("Choose date*")默认采用精确文本匹配，因此无法识别这种拆分的文本结构。

解决方案 #

以下几种方法都可以解决这个问题：

1. 使用正则表达式匹配

正则表达式可以忽略文本的节点结构，直接匹配目标内容：

// 匹配包含"Choose date"的标签
const dateInput = screen.getByLabelText(/Choose date/);

// 或者匹配带*的完整语义（屏幕阅读器会读出*，正则也能匹配）
const dateInput = screen.getByLabelText(/Choose date\*/i);

2. 关闭精确匹配

通过exact: false选项允许部分匹配：

const dateInput = screen.getByLabelText("Choose date", { exact: false });

3. 通过语义化角色或专属标识查询

因为你的输入框已经有明确的id="res-date"，也可以用角色查询：

// date类型输入框的role通常是combobox
const dateInput = screen.getByRole('combobox', { name: /Choose date/i });

// 或者给输入框添加测试专属标识（推荐）
// 组件代码修改：<input ... data-testid="res-date-input" />
const dateInput = screen.getByTestId('res-date-input');

补充说明 #

React Testing Library优先推荐语义化查询（比如通过标签文本、角色），这样的测试更贴近用户实际操作逻辑。如果使用data-testid，虽然简单，但尽量只在语义化查询无法实现时使用。

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