选择标签在小节中重复的字段

Question

我有一个表格有一些重复的标签，但在不同的小节中。这是我的部分表格的示例：

例如，我希望能够独立选择 A 部分的天数和 B 部分的天数。为此，我尝试使用 getByLabelText 方法：

it('should display correct value for days field', async () => {
    const {getByLabelText} = render(<MyForm/>);

    const daysElement = await waitForElement(() => 
        getByLabelText(/Days/i) as HTMLInputElement
    );

    expect(daysElement.value).toEqual('0');
});

我在 Days 的标签上使用 htmlFor，并在关联的输入元素上使用匹配的 ID。每个部分都提供了一个上下文来消除其他匹配 ID 的歧义（例如，几天）。例如：

<Field label={i18n.days} htmlFor={`${name}_days`} value = {<NumberControl name='days' id={`${name}_days`} value={this.state.days}}/>

在此代码中，${name} 将解析为 A 部分与 B 部分不同的内容。（Field 和 NumberControl 最终将创建标签和输入元素，适当地设置 htmlFor 和 id 值）。

当我如上图所示使用 getByLabelText 时，它获取了部分 A 的值。但是我还需要获取部分 B 的值。我该怎么做？

Answer 1

根据您的 DOM 结构，您有不同的选择。

如果你有办法查询你的部分——例如使用 data-testid——你可以使用 within:

within(getByTestId('id-for-section-A')).getByLabelText('Days')
within(getByTestId('id-for-section-B')).getByLabelText('Days')

within 为您提供 render 返回的所有查询助手，但它们仅限于您传递给它们的节点的子节点。

如果您无法将 data-testid 添加到您的部分，但您始终确定字段在页面上的显示顺序，您可以使用 getAllByLabelText:

const [firstInput, secondInput] = getAllByLabelText('Days')

最后，如果上述 none 有效，您可以使用 id 属性，因为它们是唯一的。 renderd returns 一个 container 元素，它只是一个 DOM 节点。您可以在其上使用常规 DOM 方法：

const { container } = render(<YourForm />)
container.getElementById('section_A_days')
container.querySelector('#section_A_days')

如何在 container 中查询取决于您的 DOM 结构。

我个人会选择 within 但这在很大程度上取决于您的用例。

选择标签在小节中重复的字段

Selecting a field whose label is repeated in subsections

react-testing-library