<select> element value change is not recognized properly by toHaveFormValues #117
Description
jest-domversion: 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 hereThe 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
selectedOptionsis 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.
Suggested solution:
Maybe following the same approach as testing-library/dom-testing-library#124 and switch to use the select attribute instead.