Skip to content

getByValue cannot get element by dynamically assigned value #158

@eunjae-lee

Description

@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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is neededquestionFurther information is requestedreleased

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions