React testing library on change for Material UI Select component

by

material-ui’s select component uses the mouseDown event to trigger the popover menu to appear. If you use fireEvent.mouseDown that should trigger the popover and then you can click your selection within the listbox that appears. see example below.

import React from "react";
import { render, fireEvent, within } from "react-testing-library";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";

it('selects the correct option', () => {
  const {getByRole} = render(
     <>  
       <Select fullWidth value={selectedTab} onChange={onTabChange}>
         <MenuItem value="privacy">Privacy</MenuItem>
         <MenuItem value="my-account">My Account</MenuItem>
       </Select>
       <Typography variant="h1">{/* value set in state */}</Typography>
     </>
  );
  
  fireEvent.mouseDown(getByRole('button'));

  const listbox = within(getByRole('listbox'));

  fireEvent.click(listbox.getByText(/my account/i));

  expect(getByRole('heading')).toHaveTextContent(/my account/i);
});

More Related Contents:

  1. Material UI v4 makeStyles exported from a single file doesn’t retain the styles on refresh
  2. How to add custom MUI palette colors
  3. Global outlined override
  4. Passing props to MUI styles
  5. Change border color on Material-UI TextField
  6. Internal implementation of “makeStyles” in React Material-UI?
  7. How do I custom style the underline of Material-UI without using theme?
  8. Setting text color, outline, and padding on Material-ui Autocomplete component
  9. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  10. Recommended approach for route-based tests within routes of react-router
  11. Is it possible to override material-ui components default props?
  12. How to use MUI v5 makeStyles without ThemeProvider?
  13. Media queries in MUI components
  14. How do you change a style of a child when hovering over a parent using MUI styles?
  15. Difference between @mui/material/styles and @mui/styles?
  16. How to solve the “update was not wrapped in act()” warning in testing-library-react?
  17. × TypeError: Cannot read properties of undefined (reading ‘map’)
  18. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  19. How to add custom Material UI palette colors
  20. Passing props to Material UI styles
  21. Media queries in Material UI components
  22. Material-Ui TextField not affected with the RTL direction
  23. How do you change a style of a child when hovering over a parent using Material UI styles?
  24. Why does calling react setState method not mutate the state immediately?
  25. react-router-dom v6 useNavigate passing value to another component
  26. error: Do not use Array index in keys
  27. Value of this in React event handler
  28. Is it better to define state in constructor or using property initializers?
  29. React + Material-UI – Warning: Prop className did not match
  30. Only allow specific components as children in React and Typescript

Leave a Comment