React Material UI AutoComplete单元测试报错：容器类型不符合预期

我是React单元测试新手，在测试Material UI AutoComplete组件时遇到以下错误：

Expected container to be an Element, a Document or a DocumentFragment but got string.

测试代码 #

import App from "./App.js";
import {
  render,
  screen,
  fireEvent,
  getByTestId,
  waitFor,
  within,
  getByLabelText,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("App", () => {
  test("renders App", async () => {
    render(<App />);

    const BUButton = screen.getByRole("radio", {
      name: "Male",
    });
    fireEvent.click(BUButton);

    const qualification = screen.getByRole("radio", {
      name: "Under graduate",
    });
    fireEvent.click(qualification);

    const autocomplete = getByTestId("autocomplete-search");
    const input = within(autocomplete).getByRole("textbox");
    autocomplete.focus();
    fireEvent.change(input, { target: { value: "IN" } });
    fireEvent.keyDown(autocomplete, { key: "ArrowDown" });
    fireEvent.keyDown(autocomplete, { key: "Enter" });

    let submitButton = screen.getByText("Submit", { selector: "button" });
    fireEvent.click(submitButton);
    console.log("submitButton called");
  });
});

错误原因 #

报错核心是直接调用getByTestId时未传入正确的DOM容器。@testing-library/react导出的getByTestId要求第一个参数是Element/Document/DocumentFragment类型的容器，你直接传入测试ID字符串作为第一个参数，导致方法接收到的容器不符合要求，触发错误。

解决方法 #

改用screen.getByTestId获取元素，screen已自动绑定render生成的DOM容器，无需额外传参，这也是Testing Library推荐的用法：

修正后的关键代码：

// 替换原getByTestId调用
const autocomplete = screen.getByTestId("autocomplete-search");

额外优化建议 #

1. 用userEvent替代fireEvent：userEvent模拟真实用户交互逻辑（比如输入时的完整键盘事件序列），测试结果更贴近实际场景：

   await userEvent.type(input, "IN");
   await userEvent.keyboard("{arrowdown}{enter}");
   

2. 配合waitFor处理异步渲染：AutoComplete下拉选项是异步加载的，用waitFor包裹选择操作，确保选项渲染完成后再执行，避免测试不稳定。

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