`*ByDisplayValue` does not filter by `name`

• @testing-library/dom version: ^7
• Testing Framework and version: react-scripts@^4
• DOM Environment: Chrome@ 88.0.4324.146

(Sorry, I don’t really know how to find some of these requested versions in the sandbox)

Relevant code or config:

  render(
    <React.Fragment>
      <input aria-label="Test hello" value="world" />
      <input aria-label="Test world" value="world" />
    </React.Fragment>
  );
  expect(
    screen.getByDisplayValue("world", { name: "Test world" })
  ).toBeInTheDocument();

What you did:

Ran the above test.

What happened:

The test fails because it finds two elements with a display value of world – even though it was invoked with a name filter.

Reproduction:

See code sandbox: https://codesandbox.io/s/react-testing-library-demo-forked-2swfk?file=/src/__tests__/hello.js:744-1004

Problem description:

AFAIK, the queries should accept various options that filters elements before deciding to throw.

I use await screen.findByDisplayValue to asynchronously wait for my inputs to update. In addition, I sometimes use additional options to assert on intended labels or possibly to help find elements with certain roles.

Suggested solution:

Queries should take into account all filter options before throwing on multiple element. In the codesandbox, the test should not throw.

Aside thought: is looking for all values before filtering the fastest way to find the value? Given a label, it might make sense to filter for a particular label before filtering for a particular value.

[MatanBobi]

@juanca not that I’m aware of… The point is that the name is based on the accessible name spec (https://www.w3.org/TR/accname-1.1/#mapping_additional_nd) and the only queries we have that impact the accessible name are the *ByRole ones, that’s why they are the only ones that have name filter in them 😃

[juanca]

I have a use-case for this.

Our application has two inputs. One of the inputs essentially controls the initial value for the other input.

<label>
  Select a fruit:
  <input defaultValue={inputRef.current.value} />
</label>

<label>
  Select the default fruit:
  <input ref={inputRef} />
</label>

My tests are setup to wait for the value to update on the first input.

<type into second input>
await screen.findByDisplayValue('banana', { name: 'Select a fruit:' })
<assertions on first input>

I think adding a name filter to display value queries will greatly enhance the developer experience.

Or better yet:

I think adding a value filter to queries will greatly enhance the developer experience.

---

Though, I can see the argument against adding yet more complexity to the project. And if that’s the case, perhaps a generalized query builder would be nice on the side. Just fishing for ideas here:

query(<name>, { list of attributes })