如何检查输入字段反应测试库的禁用状态答案

【问题标题】：how to check disabled status of input field react-test-library如何检查输入字段反应测试库的禁用状态
【发布时间】：2023-02-06 23:11:14
【问题描述】：

我正在使用 @testing-library/react 进行反应单元测试。

我想对输入字段的禁用状态和值进行单元测试。

下面是来自 chrome inspect 的 dom 元素。

<input type="text" placeholder="Enter text..." aria-disabled="false" class="styles__TextInput-sc-1vdcacp-2 grIDkE" value="test">

我试过如下，但它不起作用。

expect(screen.getByText('Enter text...')).toBeVisible();
expect(screen.getByRole('input')).toBeVisible();

请让我知道如何测试输入字段及其禁用状态和值。

【问题讨论】：

【解决方案1】：

您可以使用 getByRole，但参数应该是textbox，而不是input。

对于输入字段的值，您可以这样测试：

expect(screen.getByRole('textbox').value).toBe('test');

要检查禁用状态，您可以像这样使用toHaveAttribute：

expect(screen.getByRole('textbox')).toHaveAttribute(
      'aria-disabled',
      'true'
    );

【讨论】：

【解决方案2】：

您可以使用屏幕对象的 getByRole 方法找到输入元素，然后使用属性 disabled 检查禁用状态。

例如：

expect(screen.getByRole('input').disabled).toBe(false);

您还可以使用 getByPlaceholderText 方法查找输入元素，然后使用属性值检查其值。

例如：

expect(screen.getByPlaceholderText('Enter text...').value).toBe('test');

【讨论】：