Jest测试Material UI ListItem点击报错及下拉展开验证问题

1 解决模拟点击ListItem报错问题 #

报错原因 #

你调用render方法返回的是React Testing Library的渲染工具集对象，不是真实DOM元素，本身没有click方法，所以会抛出类型错误。

修正方案 #

首先需要从@testing-library/react导入fireEvent，或者使用更贴近真实用户操作的@testing-library/user-event库，先通过选择器拿到目标DOM节点后再触发点击。

修正后的独立ListItem测试代码如下：

import { render, screen, fireEvent } from "@testing-library/react";
import ListItem from "@material-ui/core/ListItem";

it("list item triggers click callback when clicked", () => {
  const onClickCallback = jest.fn();
  render(<ListItem onClick={onClickCallback}>测试项</ListItem>);
  // 先拿到ListItem对应的DOM节点
  const listItemElem = screen.getByText("测试项");
  // 触发点击事件
  fireEvent.click(listItemElem);
  expect(onClickCallback).toHaveBeenCalledTimes(1);
});

2 验证点击后下拉菜单正常展示 #

前置准备 #

• 你的SelectionList组件的childList渲染依赖data参数，需要先在组件props中补充data的类型定义，测试时传入非空的mock测试数据
• 提前mock组件依赖的useDispatch、isElementSelected、selectElement、keyFromEl等外部方法，避免测试环境报错

完整测试代码 #

import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { Provider } from "react-redux";
// 替换为你自己的store路径，也可以使用mock的测试store
import store from "你的store路径";
import { SelectionList } from "你的组件路径";

//  mock测试用的data数据
const mockData = [
  {
    name: "相机1",
    identifier: "cam1",
    // 补充其他你的业务逻辑需要的字段
  },
  {
    name: "相机2",
    identifier: "cam2",
  }
];

test("点击click me后正常展示下拉菜单", async () => {
  render(
    <Provider store={store}>
      <SelectionList
        classes={{ button_basic: "", formControl: "", selectionCard: "" }}
        action={"cameras"}
        actionArgs={""}
        onUpdateClick={() => {}}
        onDeleteClick={() => {}}
        onDetailsClick={() => {}}
        // 传入mock的data，保证childList有内容可渲染
        data={mockData}
      />
    </Provider>
  );

  // 初始状态下子列表不展示
  expect(screen.queryByText("相机1")).not.toBeInTheDocument();

  // 拿到文本为click me的ListItem并触发点击
  const triggerListItem = screen.getByText("click me");
  fireEvent.click(triggerListItem);

  // 等待Collapse动画完成，验证子列表已正常渲染
  const childItem = await screen.findByText("相机1");
  expect(childItem).toBeInTheDocument();
  expect(screen.getByText("相机2")).toBeInTheDocument();
});

如果后续修改了childList的渲染逻辑（比如删除了Collapse相关代码、修改了展示条件），这个测试会自动失败，符合你的要求。

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