以空白 <input> 元素为目标 - 只有 type 属性答案

【问题标题】：Target a blank <input> element - only has type attribute以空白 <input> 元素为目标 - 只有 type 属性
【发布时间】：2022-01-06 11:35:43
【问题描述】：

如何使用 React 测试库来定位一个只有 type 属性的空白 <input> 元素？

例如，我的输入将动态填充属性等，类似于它周围的标签：

<label htmlFor={labelInput}>
    {labelText}
</label>

<input
    type="text"
    id={labelInput}
    name={labelInput}
    ...
/>

但是虽然我没有向它传递任何东西，但它看起来像：

<input type="text" />

我一直在阅读我可以使用 getByRole('input') 或 getByRole('textbox') 来定位它，因为它具有 type="text" 属性，但是当断言其他属性不是时我似乎无法让它正常工作现在。

例如，我无法让它看到我正在执行用户操作以在输入中键入文本...

const input = getByRole('textbox');
userEvent.type(input, 'some-text');

expect(input).toHaveAttribute('value', 'some-text');

这个测试返回：

expect(element).toHaveAttribute("value", "some-text") // element.getAttribute("value") === "some-text"

Expected the element to have attribute:
   value="some-text"
Received:
   null

  24 | 
> 25 |         expect(input).toHaveAttribute('value', 'some-text');

【问题讨论】：

标签： javascript reactjs unit-testing input react-testing-library

【解决方案1】：

经过一番挖掘，我们不应该使用.toHaveAttribute('value'...，而是可以直接查询定义并找到的input变量的value属性。

执行以下测试PASSES

expect(input.value).toBe('some-text');

正如@MaxLarionov 所指出的那样：

请注意，在 expect(input.value).toBe('some-text');您正在评估输入 DOM 节点的 value 属性设置为 some-text。它不评估属性设置。对于属性，您可以使用本机 JS：

expect(input.getAttribute('value')).toBe('some-text');

【讨论】：

是的，但请注意，在expect(input.value).toBe('some-text'); 中，您正在评估input DOM 节点的value 属性设置为some-text。它不评估属性设置。对于属性，您可以使用本机 JS：expect(input.getAttribute('value')).toBe('some-text');