Dom-testing-library: Change on select not changing selected value

[phc5]

• dom-testing-library version: 4.0.0
• node version: 9.8.0
• npm (or yarn) version: 5.6.0

Relevant code or config
Uing react-testing-library but the issue happens in dom-testing-library/dist/events.js

const { container } = render(
      <SortDropdown
        placeholderText={placeHolderText}
        items={sortOptions}
        match={match}
        updateResults={mockUpdateResults}
        isUserSelection={false}
      />
    );

fireEvent.change(getByDisplayValue(container, 'Expert Rating: High to Low'), { target: { value: 'priceasc' } });

What you did:
I called fireEvent.change(), on a select element to change its value but the value does not change (stays initial selected value).

What happened:
In dom-testing-library/dist/events.js line 572, when constructing new event using EventConstructor(), the returned event.target is null despite passing in the arguments: eventName = change and eventInit = { bubbles: true, cancelable: true, target: { value: 'priceasc' }.

It hits onChange callback in my React component, but event.target.value is the initial value

[johnridesabike]

I’m having the exact same issue. fireEvent.change() will trigger the onChange callback but the value doesn’t update. I’m relatively new to using RTL, so I thought I was just doing it wrong. I tried other combinations of fireEvent.click() to try to simulate triggering the <select> callback but couldn’t figure out a working solution.

[bcarroll22]

Can you post the output of debug()?

[bcarroll22]

Actually the debug output won’t help much, nevermind. There’s no code pen to work off of but I’m going to say your problem is probably that you’re firing a change event at the container rather than on option within the select itself.

Firing at the container rather than an option in the select means there’s no valid handler for the event to bubble to.

[johnridesabike]

Here's a version of how my code looks: https://gist.github.com/johnridesabike/ce8f7ac63cc07838185b54aa894989b4

If you run the test, it will fail with the output:

    Expected element to have text content:
      red
    Received:
      no option selected

Note that the handleSelect() function does fire, but its event's value is NOTSET instead of OPTION1.

I tried using getByDisplayValue(/option 1/i), to select the exact <option> element, but it will fail with the message Unable to find an element with the value: /option 1/i..

Am I just doing it wrong? What would be the correct way of doing this?

[bcarroll22]

@johnridesabike Here's a CodeSandbox working with your example from above. Good luck!

https://codesandbox.io/s/reacttestinglibrary-demo-prj6h

[johnridesabike]

@bcarroll22 Thank you! I can see exactly what I was doing wrong. All of my tests are working as expected now.

In case anyone reading this has a similar problem, they key detail I missed was {value: "OPTION1"} should have been {target: {value: "OPTION1"}}.

[bcarroll22]

@phc5 is this issue resolved for you as well? I’d like to go ahead and close this issue if you’re all set.

[phc5]

@bcaroll22 yes! Thank you both for your responses