测试时无法选择MUI Autocomplete组件选项的问题排查

我正在开发一个React应用，其中某个组件会先弹出对话框，必须从MUI Autocomplete组件中选择选项才能继续后续操作。应用正常运行时该功能表现正常，但编写组件测试时，无法从Autocomplete中选择任何选项，导致无法关闭对话框完成测试流程。

对话框组件代码 #

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
} from "@mui/material";
import { useEffect, useState } from "react";
import Autocomplete from "@mui/material/Autocomplete";

interface Value{
  name: string;
  code: string;
}

interface DialogProps {
  open: boolean;
  onSelect: (code: string) => void;
}

export default function Dialog({
  open,
  onSelect,
}: Readonly<SubjectDialogProps>) {
  const [values, setValues] = useState<Value[]>([]);
  const [selected, setSelected] = useState<Value | null>(null);

  useEffect(() => {
    const loadValues = async () => {
      try {
        // 此处加载的JSON文件内容非空，格式符合要求
        const response = await fetch("/data/values.json");
        const data: Value[] = await response.json();
        setValues(data);
      } catch (err) {
        console.error("Failed to load subjects:", err);
      }
    };
    loadValues();
  }, []);

  const handleConfirm = () => {
    if (selected) {
      onSelect(selected.code);
    }
  };

  return (
    <Dialog
      open={open}
      disableEscapeKeyDown
      onClose={() => {
        // 未选中选项时禁止关闭对话框
        if (!selected) return;
      }}
      fullWidth
      maxWidth="sm"
    >
      <DialogTitle>Select a Value</DialogTitle>
      <DialogContent>
        <Autocomplete
          options={values}
          getOptionLabel={(option) => option.name}
          value={selected}
          onChange={(_, newValue) => setSelected(newValue)}
          renderInput={(params) => (
            <TextField
              {...params}
              label="Value"
              variant="outlined"
            />
          )}
          sx={{ mt: 2 }}
          isOptionEqualToValue={(option, value) => option.code === value.code}
        />
      </DialogContent>
      <DialogActions>
        <Button
          onClick={handleConfirm}
          variant="contained"
          disabled={!selected}
        >
          CONFIRM
        </Button>
      </DialogActions>
    </Dialog>
  );
}

父组件的onSelect方法仅获取选中值的code并存储供后续使用。

测试代码尝试 #

我尝试了多种方式，但Autocomplete组件似乎失去焦点，选项无法显示。以下是测试代码示例：

const autocomplete = screen.getByRole("combobox", {
    name: "Value",
  });

  const autoCompleteDropdown = screen.getByRole("button", { name: "Open" });

  await userEvent.click(autoCompleteDropdown);

  // 导航并选择第一个选项
  fireEvent.keyDown(autocomplete, { key: "ArrowDown" });
  fireEvent.keyDown(autocomplete, { key: "Enter" });

  // 获取确认按钮
  const confirmButton = screen.getByRole("button", {
    name: CONSTANTS.component.common.confirm,
  });

  // 等待按钮变为可用状态
  await waitFor(() => expect(confirmButton).toBeEnabled());

  // 点击关闭对话框
  await user.click(confirmButton);

执行错误 #

运行测试后出现以下错误：

expect(element).toBeEnabled()

Received element is not enabled:
  <button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-74d805-MuiButtonBase-root-MuiButton-root" disabled="" tabindex="-1" type="button" />
  345 |
  346 |   // Wait for button to become enabled
> 347 |   await waitFor(() => expect(confirmButton).toBeEnabled());
        |                                             ^
  348 |
  349 |   // Click to close the dialog
  350 |   await user.click(confirmButton);

我还尝试在Autocomplete中输入值来选择选项，但提示未找到选项；输入后按回车也无效，测试中始终无法选中任何选项。测试命令为react-scripts test，@mui/material版本为7.3.4。

内容的提问来源于stack exchange，提问作者Carlos Lavilla