getByValue cannot get element by dynamically assigned value

[eunjae-lee]

• dom-testing-library version: 3.12.4
• react version: not using with react
• node version: 8.11.1
• npm (or yarn) version: npm 5.6.0

Relevant code or config:

test('get element by its dynamically assigned value', () => {
  const {getByValue, queryByValue, getByTestId} = renderIntoDocument(`
  <div>
    <input placeholder="name" type="text" data-testid="name" />
  </div>
  `)
  getByTestId('name').value = 'Norris'
  expect(getByValue('Norris').placeholder).toEqual('name')
  expect(queryByValue('Norris').placeholder).toEqual('name')
})

What you did:

There's an input element (without initial value attribute). I put some value in it with JavaScript.

What happened:

getByValue or queryByValue cannot get the element.

  ● get element by its dynamically assigned value

    Unable to find an element with the value: Norris.

Reproduction:

Problem description:

According to queryAllByAttribute at src/query-helpers.js, it's executing some code like

container.querySelectorAll("[value]")

Since the input element didn't have any value attribute at the first place, this query cannot get it.

Suggested solution:

It should still get input element unless this behaviour is intended.
Querying it with [value] didn't work. Getting value with node.getAttribute("value") didn't work either. So I guess the following code could solve the problem.

Array.from(container.querySelectorAll("input")).filter(node => node.value === value)

Let me know what you think!

[alexkrolick]

The .value setter/getter and the DOM attribute aren't necessarily in sync (see Codepen), so you'd probably need to concat the results of both the current querySelectorAll and the proposed filtered DOM traversal, and maybe dedupe the results with some documented hierarchy (probably preferring the dynamic .value).

[kentcdodds]

🎉 This issue has been resolved in version 3.14.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀