这是我想测试的组件的HTML结构
<body>
<div>
<div>
<fieldset>
<label>
<span>
Start date
</span>
</label>
<input
type="date"
value="10.11.2020"
/>
</fieldset>
<fieldset>
<label>
<span>
End date
</span>
</label>
<input
type="date"
value="22.12.2022"
/>
</fieldset>
</div>
</div>
</body>
我想做的是找到开始和结束日期输入标记并单击它们。
不幸的是，我无法更改此标记-例如，我无法将data-testid="start-input"添加到第一个输入标签
RTL文档说，我应该尝试通过文本或它们的角色来查找元素-所以我可以找到字段集角色，或者，我一直在尝试这样做-找到标签文本，然后尝试获得最接近的输入元素，所以这样；
const DateRange = renderComponent();
const StartDateInput = DateRange.getByText('Start date').closest('input');
控制台日志StartDateInput返回null-如果我删除.closest('input')，我有标签标签元素，这样零件至少在之前是正确的
我找不到任何关于如何做到这一点的RTL文档——如果有人知道任何文档，并能为我指明正确的方向，那将是令人惊叹的
我不确定我的问题是否可能(我希望有人告诉我是否可能(。。。但我确实找到了解决问题的方法
只需通过显示值搜索DOM/HTML元素
const StartDateInput = DateRange.getByDisplayValue('2020-11-11');
只是需要注意的是，这将不适用于原始问题中的代码，因为我想说明我犯的一个错误，它为我的消耗了很多时间
在我的测试中，我将mockStart和mockEnd日期设置为
let mockStartDate = '11.11.2020';
let mockEndDate = '11.11.2022';
这导致测试告诉我"找不到显示值为11.11.2020的元素"，因为这是无效的日期格式。。。将字符串更新为这个修复了问题；
let mockStartDate = '2020-11-11';
let mockEndDate = '2022-11-11';