7

I've got a unit test using Jest and React Testing Library that fills and submits a form. The problem is that after upgrading Material UI to version 4 my unit test fails to select an option. The error is: "Unable to find an element with the text: Brazil" Brazil is the text option I'm trying to select. Using Material UI version 3 was working just fine.

Test Code - Gives error: "Unable to find an element with the text: Brazil."

fireEvent.click(getByTestId("id-country"));
const countryOption = await waitForElement(() => getByText("Brazil"));
fireEvent.click(countryOption);

React Component Code

<Grid item xs={12} sm={4}>
        <TextField
            id="select-country"
            name="country"
            select
            helperText={touched.country ? errors.country : ""}
            error={touched.country && Boolean(errors.country)}
            required
            label="Country"
            onChange={handleChange}
            value={values.country}
            className={classes.selectField}
            SelectProps={{
                SelectDisplayProps: {
                    "data-testid": "id-country"
                }
            }}
        >
            {countryEnum.map(country => (
                <MenuItem key={country.type} value={country.type}>
                    {country.label}
                </MenuItem>
            ))}
        </TextField>
</Grid>
Viny Machado
  • 582
  • 12
  • 23

2 Answers2

22

For v4, the Select was changed to open on mouseDown instead of click (https://github.com/mui-org/material-ui/pull/17978).

So instead of:

fireEvent.click(getByTestId("id-country"));

you should have:

fireEvent.mouseDown(getByTestId("id-country"));
Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
-1

In My case any click evvent did not work ie, element.click() event does not trigger dropdown open, so I had to come up with code changes in my componenet where I can open it via open and bind to select itself here is how I have done it.

  import React from 'react';
  import InputLabel from '@material-ui/core/InputLabel';
  import MenuItem from '@material-ui/core/MenuItem';
  import FormControl from '@material-ui/core/FormControl';
  import Select from '@material-ui/core/Select';
  import Button from '@material-ui/core/Button';
    
    export default function ControlledOpenSelect() {
      const [value, setValue] = React.useState('');
      const [open, setOpen] = React.useState(false);
    
      const handleChange = (event) => {
        setValue(event.target.value);
      };
    
      return (
        <div>
          <FormControl >
            <Select
              open={open}
              onClick={()=> setOpen(!open)}
              value={value}
              onChange={handleChange}
            >
              <MenuItem value="">
                <em>None</em>
              </MenuItem>
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </div>
      );
    }

in any testing now click event triggers open of select

Divek John
  • 623
  • 8
  • 16