如何使用 react-testing-library 检查 material-ui MenuItem 是否被禁用

Question

I am using Material-UI with react to build a Dropdown component.

Dropdown.tsx

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow, { GrowProps } from "@material-ui/core/Grow";
import Input from "@material-ui/core/Input";
import MenuList from "@material-ui/core/MenuList";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuItem from "@material-ui/core/MenuItem";

export default function Dropdown(props: {
  onSearch: (suggestion: string) => void;
}) {
  const [searchText, setSearchText] = React.useState("");
  const [open, setOpen] = React.useState(false);

  let searchElement: null | HTMLElement = null;

  const onSearchTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(event.target.value);
    setOpen(true);
  };

  const openSearchSuggestion = () => {
    setOpen(true);
  };

  const setSearchElement = (node: null | HTMLElement) => {
    searchElement = node;
  };

  const closeSearchSuggestion = () => {
    setOpen(false);
  };

  const handleOnClickAway = (event: React.MouseEvent<EventTarget>) => {
    if (searchElement && searchElement.contains(event.target as HTMLElement)) {
      return;
    }
    closeSearchSuggestion();
  };

  const handleSearchSuggestionClick = (suggestion: string) => (
    event: React.MouseEvent<EventTarget>
  ) => {
    props.onSearch(suggestion);
  };

  const searchSuggestionsRenderer = (suggestion: string, index: number) => {
    return (
      <MenuItem
        key={index}
        onClick={handleSearchSuggestionClick(suggestion)}
        className="suggestion-item"
        id={`suggestion-item-${index}`}
        disabled={suggestion === "Criteria 2"}
      >
        {searchText} in {suggestion}
      </MenuItem>
    );
  };

  const popperTrans = ({ TransitionProps }: { TransitionProps: GrowProps }) => {
    const searchSuggestions = ["Criteria 1", "Criteria 2"];
    return (
      <Grow {...TransitionProps} style={{ transformOrigin: "0 0 0" }}>
        <Paper className="search-suggestions-paper">
          <ClickAwayListener onClickAway={handleOnClickAway}>
            <MenuList>
              {searchText &&
                searchSuggestions &&
                searchSuggestions.map(searchSuggestionsRenderer)}
            </MenuList>
          </ClickAwayListener>
        </Paper>
      </Grow>
    );
  };

  return (
    <div>
      <Input
        inputRef={setSearchElement}
        className="search-input"
        placeholder="Search"
        value={searchText}
        onChange={onSearchTextChange}
        onFocus={openSearchSuggestion}
        data-testid="searchInput"
      />
      <Popper
        className="search-suggestion-popper"
        open={open && searchText.trim().length >= 2}
        anchorEl={searchElement}
        placement="bottom-start"
        transition={true}
      >
        {popperTrans}
      </Popper>
    </div>
  );
}

I am now testing this component using react-testing-library. I want to check that the 2nd option in the dropdown is disabled. I tried checking that the onSearch function which is called on click of the menuitem is not called when I click the 2nd option.

test to check option is disabled

  test('that criteria 2 option is disabled', () => {
    const props = { onSearch: jest.fn() }
    const { getAllByRole, getByTestId } = render(<Dropdown {...props} />);
    const Input = getByTestId('searchInput');
    const TextBox = globalGetByRole(Input, 'textbox') as HTMLInputElement;
    fireEvent.change(TextBox, { target: { value: 'test' } });
    const MenuItems = getAllByRole('menuitem');
    expect(MenuItems.length).toBe(2);
    const Criteria2MenuItem = MenuItems[1];
    fireEvent.click(Criteria2MenuItem);
    expect(props.onSearch).toHaveBeenCalledTimes(0);
  });

But this did not work. The function is being called once. Why is this happening and how can I test what I want to test?

Answer 1

I am using Material-UI with react to build a Dropdown component.

Dropdown.tsx

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow, { GrowProps } from "@material-ui/core/Grow";
import Input from "@material-ui/core/Input";
import MenuList from "@material-ui/core/MenuList";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuItem from "@material-ui/core/MenuItem";

export default function Dropdown(props: {
  onSearch: (suggestion: string) => void;
}) {
  const [searchText, setSearchText] = React.useState("");
  const [open, setOpen] = React.useState(false);

  let searchElement: null | HTMLElement = null;

  const onSearchTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(event.target.value);
    setOpen(true);
  };

  const openSearchSuggestion = () => {
    setOpen(true);
  };

  const setSearchElement = (node: null | HTMLElement) => {
    searchElement = node;
  };

  const closeSearchSuggestion = () => {
    setOpen(false);
  };

  const handleOnClickAway = (event: React.MouseEvent<EventTarget>) => {
    if (searchElement && searchElement.contains(event.target as HTMLElement)) {
      return;
    }
    closeSearchSuggestion();
  };

  const handleSearchSuggestionClick = (suggestion: string) => (
    event: React.MouseEvent<EventTarget>
  ) => {
    props.onSearch(suggestion);
  };

  const searchSuggestionsRenderer = (suggestion: string, index: number) => {
    return (
      <MenuItem
        key={index}
        onClick={handleSearchSuggestionClick(suggestion)}
        className="suggestion-item"
        id={`suggestion-item-${index}`}
        disabled={suggestion === "Criteria 2"}
      >
        {searchText} in {suggestion}
      </MenuItem>
    );
  };

  const popperTrans = ({ TransitionProps }: { TransitionProps: GrowProps }) => {
    const searchSuggestions = ["Criteria 1", "Criteria 2"];
    return (
      <Grow {...TransitionProps} style={{ transformOrigin: "0 0 0" }}>
        <Paper className="search-suggestions-paper">
          <ClickAwayListener onClickAway={handleOnClickAway}>
            <MenuList>
              {searchText &&
                searchSuggestions &&
                searchSuggestions.map(searchSuggestionsRenderer)}
            </MenuList>
          </ClickAwayListener>
        </Paper>
      </Grow>
    );
  };

  return (
    <div>
      <Input
        inputRef={setSearchElement}
        className="search-input"
        placeholder="Search"
        value={searchText}
        onChange={onSearchTextChange}
        onFocus={openSearchSuggestion}
        data-testid="searchInput"
      />
      <Popper
        className="search-suggestion-popper"
        open={open && searchText.trim().length >= 2}
        anchorEl={searchElement}
        placement="bottom-start"
        transition={true}
      >
        {popperTrans}
      </Popper>
    </div>
  );
}

I am now testing this component using react-testing-library. I want to check that the 2nd option in the dropdown is disabled. I tried checking that the onSearch function which is called on click of the menuitem is not called when I click the 2nd option.

test to check option is disabled

  test('that criteria 2 option is disabled', () => {
    const props = { onSearch: jest.fn() }
    const { getAllByRole, getByTestId } = render(<Dropdown {...props} />);
    const Input = getByTestId('searchInput');
    const TextBox = globalGetByRole(Input, 'textbox') as HTMLInputElement;
    fireEvent.change(TextBox, { target: { value: 'test' } });
    const MenuItems = getAllByRole('menuitem');
    expect(MenuItems.length).toBe(2);
    const Criteria2MenuItem = MenuItems[1];
    fireEvent.click(Criteria2MenuItem);
    expect(props.onSearch).toHaveBeenCalledTimes(0);
  });

But this did not work. The function is being called once. Why is this happening and how can I test what I want to test?

Answer 2

I am using RTL with Jest and This work for me.

const menuitem = screen.getAllByRole('menuitem', { name: 'manue-item-name' });
screen.debug(menuitem);
expect(menuitem[0].getAttribute('aria-disabled')).toBeTruthy();

OR

const menuitem = screen.getAllByRole('menuitem');
screen.debug(menuitem);
expect(menuitem[0].getAttribute('aria-disabled')).toBeTruthy();