Jest-dom: <select> element value change is not recognized properly by toHaveFormValues

Created on 18 Jun 2019 · 3Comments · Source: testing-library/jest-dom

jest-dom version: 3.5.0

Relevant code or config:

const { container } = render(
  <form>
    <select name="priority">
      <option value="low">Low</option>
      <option value="medium">Medium</option>
      <option value="high">High</option>
    </select>
  </form>
)
const form = container.querySelector('form')
const select = container.querySelector('select')
fireEvent.change(select, { target: { value: 'high' } })
expect(form).toHaveFormValues({ priority: 'high' }) // <- fails here

The above test should pass, but it does not. It fails to recognize the change in the selected value of the select.

Problem description:

After some digging I'm pretty sure this has something to do with the cause of this issue in dom-testing-library. This issue was fixed in this PR, and this is mention in that PR description:

Since selectedOptions is not a reactive property, JSDOM was not updating to match the selected option in a select Element. The selected attribute is reactive.

We're using selectedOptions ourselves to check the selected options in a select. See the relevant code.