-
Notifications
You must be signed in to change notification settings - Fork 467
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<select> doesn't reflect new "select text" in response to change event #115
Comments
Hmmm... I'm not sure what's going on here. Would anyone care to dig deeper into this? I created this and I'm unable to reproduce: https://jsbin.com/lukecehisa/edit?html,js,console |
Thanks for checking it out I'm pretty sure the jsbin snippet works because it executes in the browser, and as I mentioned in the OP, this behaviour for the select is different from the browser. Would be great if someone could take a look! 😄 |
I can reproduce the same error in a Jest/JSDOM environment |
Hmmm... Maybe it's a bug in JSDOM :-( |
Probably this: jsdom/jsdom#2326, fixed Aug 18 https://github.com/kentcdodds/dom-testing-library/blob/master/src/queries.js#L117 The fix went out in JSDOM 12.0.0 https://github.com/jsdom/jsdom/blob/master/Changelog.md#1200 But I'm seeing jsdom 11.5.1 coming in via jest-environment-jsdom |
Ah, in that case I'm pretty sure we'll need an updated version of jsdom which I'm guessing is already in the latest version of Jest 🤔 |
JSDOM peer is not updated in the Jest repo: https://github.com/facebook/jest/blob/master/packages/jest-environment-jsdom/package.json#L13 |
@theneva perhaps you could open a PR on Jest to upgrade JSDOM? |
In any case, there's not much we can do in this project, so I'm going to go ahead and close this issue. Sorry! 😬 |
Try adding this to package.json
Didn't seem to work for me but maybe you can figure something out. |
We won't upgrade jsdom in jest (for some time) as they've dropped node 6. See e.g. jestjs/jest#7122 |
Ah, that's unfortunate. Any timeframe on when jest can drop node < 8? |
Probably not before it's EOL-ed, although we dropped 4 in December 2017. But I wouldn't bet on a PR dropping 6 landing before Christmas |
Ok, thanks! |
With help from @SimenB I put together a version of jest-environment-jsdom that ships JSDOM version 12: GitHub: https://github.com/theneva/jest-environment-jsdom-twelve Using that solves my issue 😄 Thanks for looking into this! |
Though I wouldn't mind opening a PR to change it to @kentcdodds What would you prefer? |
Yeah, we can do this: const selectedOptions = Array.from(selectElement.options).filter(option => option.selected) |
<!-- Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file). Also, please make sure you're familiar with and follow the instructions in the contributing guidelines (found in the CONTRIBUTING.md file). If you're new to contributing to open source projects, you might find this free video course helpful: http://kcd.im/pull-request Please fill out the information below to expedite the review and (hopefully) merge of your pull request! --> <!-- What changes are being made? (What feature/bug is being fixed here?) --> **What**: Replace the existing select query mechanism which uses `HTMLSelectElement .selectedOptions` with a query that searches for the `selected` attribute of an `HTMLOptionElement`. <!-- Why are these changes necessary? --> **Why**: Closes #115. 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. <!-- How were these changes implemented? --> **How**: Instead of iterating through `selectedOptions` of an HTMLSelectElement, we iterate through all HTMLSelectOptions and isolate the ones that are selected. <!-- Have you done all of these things? --> I've gone ahead and tested this locally to make sure that it would be reactive! 👍 **Checklist**: <!-- add "N/A" to the end of each line that's irrelevant to your changes --> <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" --> - [ ] Documentation N/A - [ ] Tests N/A - [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? --> - [x] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions --> <!-- feel free to add additional comments -->
🎉 This issue has been resolved in version 3.10.1 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
dom-testing-library
version: 3.8.2react
version: N/Anode
version: v10.11.0 (but it doesn't matter)npm
(oryarn
) version:yarn 1.10.1
(but it doesn't matter)Relevant code or config:
See the reproduction section below.
What you did:
<div>
containing a<select>
with two<option>
s.<select>
usinggetBySelectText
change
event on the fetched<select>
to select another valid option<select>
from the<div>
again using the newly selected option's label (child element)What happened:
The
<select>
cannot be fetched by its new "select text":Reproduction:
I've tried (among other things):
wait
ing for a tick to let updates happenfocus
andblur
before and after firing thechange
to force a rerenderwaitForElement
(it just fails in the same way, but faster)Problem description:
The
<select>
element doesn't seem to update its displayed value, so it behaves differently from what a user experiences in a browser.Suggested solution:
The
<select>
should be selectable using the label of the selected option. I don't know how to fix it, though 😄The text was updated successfully, but these errors were encountered: