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，在关联的input元素上使用匹配的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')

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

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

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

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

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

1 个答案: