Selecting a field whose label is repeated in subsections - react-testing-library

Question

I have a form that has some labels repeated, but in different subsections. Here's an example of part of my form:
I want to be able to choose, for example, the Days from Section A and also the Days from Section B independently. To that end, I've tried using the getByLabelText method:
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');
});
I'm using htmlFor on the label for Days and a matching Id on the associated input element. Each section has a context provided to disambiguate the otherwise matching Ids (e.g. for days). For example:
<Field label={i18n.days} htmlFor={`${name}_days`} value = {<NumberControl name='days' id={`${name}_days`} value={this.state.days}}/>
In this code, ${name} would resolve to something that is different for section A vs section B. (Field and NumberControl would ultimately create label and input elements, setting htmlFor and id values appropriately).
When I use getByLabelText as illustrated above, it obtains the value for Section A. But I also need to obtain the value for Section B. How would I do this?

Answer 1

You have different options depending on your DOM structure.
If you have a way to query your section—for example with a data-testid—you could use within:
within(getByTestId('id-for-section-A')).getByLabelText('Days')
within(getByTestId('id-for-section-B')).getByLabelText('Days')
within gives you all the query helpers that are returned by render but they are limited to the children of the node you pass to them.
If you can't add a data-testid to your section but you're always sure about the order in which the fields appear on the page you can use getAllByLabelText:
const [firstInput, secondInput] = getAllByLabelText('Days')
Lastly, if none of the above works, you could use the id attributes since they are unique. renderd returns a container element which is just a DOM Node. You can use the regular DOM methods on it:
const { container } = render(<YourForm />)
container.getElementById('section_A_days')
container.querySelector('#section_A_days')
How you query within your container depends on your DOM structure.
I personally would go with within but it very much depends on your use-case.