使用 React 测试库测试没有标签的输入答案

【问题标题】：Test input without label with React Testing Library使用 React 测试库测试没有标签的输入
【发布时间】：2021-01-19 14:06:08
【问题描述】：

我在我的应用程序中使用 react-testing-library。通常，要检查输入是否在表单中，我们使用 getByLabelText。例如：

getByLabelText(/name/i)

但是如果我的输入没有任何标签怎么办？这是因为设计（UI），所以我不能有输入标签。如何检查表单中是否存在该输入？

【问题讨论】：

【解决方案1】：

您可以使用以下内容来定位文本输入字段。

getByRole('textbox', {name: /name/i})

【讨论】：

【解决方案2】：

您可以将测试 ID 添加到仅用于测试目的的输入。

<input data-testid="your-id" />

在您的测试中，您将执行query 而不是get，因为如果元素根本不存在，get 将无法通过测试。

expect(queryByTestId('your-id')).toBeInTheDocument()

或者您可以通过显示值搜索以查找输入值

expect(queryByDisplayValue('input-value')).toBeInTheDocument()

【讨论】：

【解决方案3】：

您还可以在输入中添加 aria-label：

<TextField inputProps={{'aria-label': "example" }} />

然后在你的测试中：

expect(screen.getByRole("textbox", { name: "example"})).toBeInTheDocument();

【讨论】：

【解决方案4】：

如果您不知道输入中的预期文本，您可以在输入中添加“data-testid”并像这样找到它：

<input data-testid="my-input"/>

const myInput = getByTestId('my-input');

【讨论】：