reactjs - Material UI 选择 onChange 在 react 测试库中不起作用

Question

<Select
                    inputProps={{ "data-testid": "change-form" }}
                    multiple
                    value={permissionsArr}
                    onChange={handleChange}
                    input={<Input />}
                    renderValue={selected => (
                        <ChipsContainer >
                            { selected.map(value => (
                                <Chip key={value} label={value} />
                            ))}
                        </ChipsContainer >
                    )}
                >
                    {perms.map(name => (
                        <MenuItem key={name} value={name}>{prettyName(name)}</MenuItem>
                    ))}
                </Select>

这是我要测试的选择元素，这里的 permissionArr 是显示的字符串列表。而 handleChange 正在改变 permissionsArr。但是当我尝试测试这个时:

const labelPermissions = queryByTestId("change-form")
fireEvent.change(labelPermissions, { target: { value:  ["string", "string"] }} );

它不会调用 onChange 事件。这可能是因为值不应该是一个数组是我最好的猜测。我已经坚持了一段时间，非常感谢任何帮助。

Answer 1

Select 实际上没有 change 事件。提供给 onChange 的函数在由于其他事件发生更改时被调用——通常是单击 MenuItem。我建议您构建测试以使用与用户进行的交互相同的交互。

下面是一个使用来自 documentation 的多重选择的示例测试:

demo.test.js

import React from "react";
import {
  render,
  fireEvent,
  waitForElementToBeRemoved,
  screen
} from "@testing-library/react";
import Demo from "./demo";
import "@testing-library/jest-dom/extend-expect";

test("display and change select", async () => {
  render(<Demo />);
  // Open the Select
  fireEvent.mouseDown(screen.getByLabelText("Name"));
  // Click the entries you want to select
  fireEvent.click(screen.getByText("Van Henry"));
  fireEvent.click(screen.getByText("April Tucker"));
  // Close the select using Escape or Tab or clicking away
  fireEvent.keyDown(document.activeElement, {
    key: "Escape",
    code: "Escape"
  });
  // Wait for Menu to close
  await waitForElementToBeRemoved(screen.getByText("Oliver Hansen"));
  // Verify selections
  expect(screen.getByLabelText("Name")).toHaveTextContent(
    "Van Henry, April Tucker"
  );
});

这是它正在测试的代码:

demo.js

import React from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
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";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    maxWidth: 300
  },
  chips: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: 2
  },
  noLabel: {
    marginTop: theme.spacing(3)
  }
}));

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  }
};

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder"
];

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium
  };
}

export default function MultipleSelect() {
  const classes = useStyles();
  const theme = useTheme();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = event => {
    setPersonName(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-multiple-name-label">Name</InputLabel>
        <Select
          labelId="demo-multiple-name-label"
          id="demo-multiple-name"
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input />}
          MenuProps={MenuProps}
        >
          {names.map(name => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}