on change for Material UI Select component not triggered

[dimosmera]

• react-testing-library version: 4.1.3
• react version: 16.4.1
• node version: 11.10.1
• npm (or yarn) version: 6.7.0

Relevant code or config:

    const select = await waitForElement(() =>
      getByTestId("select-testid")
    );

    select.value = "testValue";
    fireEvent.change(select);

   <Select
       className={classes.select}
       onChange={this.handleSelectChange}
       value={selectedValue}
       inputProps={{
         id: "select-id",
         "data-testid": "select-id"
       }}
   >

What you did:

I am trying to fire the onChange method of the Material UI Select.

What happened:

onChange won't fire.
Also tried with

select.dispatchEvent(new Event('change', { bubbles: true }));

[finreinhard]

The same occurs with the Boostrap(reactstrap) Input Checkbox

[finreinhard]

According to this issue (#275), you should use the onClick event, not the onChange Event, but on reactstrap its not supported right now :/ I hope react-testing-library can implement the onChange function to it like browsers has it.

Edit: While inspecting this, I found out, that onClick isn't supported by react-testing-library as well.

[kentcdodds]

that onClick isn't supported by react-testing-library as well.

That's not true. fireEvent.click exists.

If a "checkbox" component doesn't handle a click event then that component is inaccessible. This would be a bug in that component and should be fixed.

As for the original post, do this:

    const select = await waitForElement(() =>
      getByTestId("select-testid")
    );

    fireEvent.change(select, {target: {value: 'testValue'}});

Good luck!

[dimosmera]

As for the original post, do this:

    const select = await waitForElement(() =>
      getByTestId("select-testid")
    );

    fireEvent.change(select, {target: {value: 'testValue'}});

Good luck!

This by itself did not work. That being said, both of the following do work:

    select.value = "testValue";
    fireEvent.change(select, {target: {value: "testValue"}});

or

    select.value = "testValue";
    fireEvent.change(select);

I personally prefer the second option.

Something to note for future readers: If you are using a Material UI select, none of the above will work. You'll have to use the native version of the Select element.
For future reference: https://stackoverflow.com/questions/55184037/react-testing-library-on-change-for-material-ui-select-component

[anandthanki1]

Hey @kentcdodds, Can you please brief us on how we can efficiently use react-testing-library with React Material-UI components ? I faced a similar issue of while testing the Material UI select(Not native select) onChange function.

This is the codeSandBox link: https://codesandbox.io/s/q94q9z1849

In the codeSandBox code I have similar Select component which I am using. For your info, the dropdown which appears in Select component is a Paper component. Best regards!!!

[ashoksudani]

Hi @kentcdodds

Any help on how can we make testing select possible for onchange event when native is not true?

[weyert]

Sure, happy to have a look at it but your CodeSandbox is missing any unit tests at the moment

[anandthanki1]

Hey @weyert, please feel free to add unit test cases in the Codesandbox example. Thank you.

[weyert]

I assume you already have some unit test cases you tried? The code sandbox you linked doesn't even have react-testing-library as a dependency. I would also suggest to look at https://stackoverflow.com/a/55576660

[anandthanki1]

Hey @weyert , I have updated the codesandbox example and have wrote unit test for it. I would like to thank you for taking a look at this issue.

Here is the link for updated codesandbox: https://codesandbox.io/s/q94q9z1849

Please feel free to edit it or suggest improvements on it.

[weyert]

Try this: https://codesandbox.io/embed/94pm1qprmo
I have moved the data-testid to the inputProps-prop of the Select of ControlledOpenSelect-component also I have written a unit test for you which clicks on Thirty and ensures a onChange-props got triggered (I added the onChange to your comp).

Not sure, why it doesn't work in the browser but when you download it and test locally the unit test is successful. I hope it helps!

[ashoksudani]

Thanks @weyert @anandthanki1
My tests are getting passed through your suggested way of selecting button and then clicking on element found by text. perfect.

[anandthanki1]

Thank you @weyert

[TidyIQ]

The same issue occurs for Input components as well.

fireEvent.change(input, { target: { value: "Valid input value" } }); does nothing.