dom-testing-library: doesn't reflect new "select text" in response to change event

• dom-testing-library version: 3.8.2
• react version: N/A
• node version: v10.11.0 (but it doesn’t matter)
• npm (or yarn) version: yarn 1.10.1 (but it doesn’t matter)

Relevant code or config:

See the reproduction section below.

What you did:

1. Created a <div> containing a <select> with two <option>s.
2. Fetched the <select> using getBySelectText
3. Fired a change event on the fetched <select> to select another valid option
4. Verified that the value was changed
5. Attempted to fetch the <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”:

 FAIL  ./index.test.js
  ✕ should respond to changes (4520ms)

  ● should respond to changes

    Unable to find a <select> element with the selected option's text: Option 2

    <div>
      <select>


        <option
          value="option-1"
        >
          Option 1
        </option>


        <option
          value="option-2"
        >
          Option 2
        </option>


      </select>
    </div>

      22 |     // but this times out because the text hasn't been updated.
      23 |     // No changes are reflected in the DOM, which is probably why…
    > 24 |     return waitForElement(() => getBySelectText(container, 'Option 2'));
         |                                 ^
      25 | });
      26 |

      at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:29:10)
      at getAllBySelectText (node_modules/dom-testing-library/dist/queries.js:375:45)
      at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:37:30)
      at getBySelectText (node_modules/dom-testing-library/dist/queries.js:385:42)
      at getBySelectText (index.test.js:24:33)
      at onMutation (node_modules/dom-testing-library/dist/wait-for-element.js:48:22)
      at node_modules/dom-testing-library/dist/wait-for-element.js:66:7
      at waitForElement (node_modules/dom-testing-library/dist/wait-for-element.js:26:10)
      at Object.waitForElement (index.test.js:24:12)

Reproduction:

const { getBySelectText, fireEvent, wait, waitForElement } = require('dom-testing-library');

it('should respond to changes', () => {
    const select = document.createElement('select');
    select.innerHTML = `
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
    `;

    const container = document.createElement('div');
    container.appendChild(select);

    const foundSelectBeforeEvent = getBySelectText(container, 'Option 1');
    expect(foundSelectBeforeEvent.value).toBe('option-1');

    fireEvent.change(foundSelectBeforeEvent, { target: { value: 'option-2' }});

    // It has been updated, and this passes
    expect(foundSelectBeforeEvent.value).toBe('option-2');

    // I would then expect to be able to get the <select> again by the new text,
    // but this times out because the text hasn't been updated.
    // No changes are reflected in the DOM, which is probably why…
    return waitForElement(() => getBySelectText(container, 'Option 2'));
});

I’ve tried (among other things):

• waiting for a tick to let updates happen
• Firing events for focus and blur before and after firing the change to force a rerender
• Not wrapping the fetching in waitForElement (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 😄

About this issue

• Original URL
• State: closed
• Created 6 years ago
• Comments: 18 (12 by maintainers)

Commits related to this issue

• fix(queryAllBySelectText): search using reactive properties (#124) <!-- Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated! Please make sure that you are famili... — committed to testing-library/dom-testing-library by deleted user 6 years ago

Most upvoted comments

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 npm: https://www.npmjs.com/package/jest-environment-jsdom-twelve

Using that solves my issue 😄

Thanks for looking into this!

+3

theneva on Oct 10, 2018

Hmmmm… What if we get the best of all worlds. If the select has multiple then let’s use selectedOptions (hopefully they don’t need it to be reactive), if it’s not multiple then we can use selectedIndex.

Is there any way we could iterate through the…

Yeah, we can do this:

const selectedOptions = Array.from(selectElement.options).filter(option => option.selected)

+2

kentcdodds on Oct 12, 2018

I can reproduce the same error in a Jest/JSDOM environment

+2

alexkrolick on Oct 9, 2018

🎉 This issue has been resolved in version 3.10.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

+1

kentcdodds on Oct 12, 2018

Though HTMLSelectElement.selectedOptions is not reactive in the version of JSDOM bundled with Jest, HTMLSelectElement.selectedIndex is.

I wouldn’t mind opening a PR to change it to selectedIndex, but that would drop compatibility with the multiple attribute.

@kentcdodds What would you prefer?

+1

matchai on Oct 12, 2018

Read more comments on GitHub

← dom-testing-library: Regression: "ReferenceError: global is not defined"

dom-testing-library: Some dependencies don't support ES modules →