如何在React Testing Library中Mock外部库组件并验证传入Props

你遇到的报错是因为直接导入了真实的SomeComponent，它不是Jest的mock/spy函数，无法使用toHaveBeenCalledWith这类校验调用记录的匹配器。以下是完整的解决步骤：

步骤1：模拟外部库组件 #

在测试文件所有import语句前添加jest.mock配置，仅将需要校验props的SomeComponent替换为mock函数，其余Material UI组件保持原有实现：

jest.mock('@material-ui/core', () => ({
  // 保留其他Material UI组件的真实实现
  ...jest.requireActual('@material-ui/core'),
  // 把目标组件替换为mock函数，返回null避免渲染其内部内容
  SomeComponent: jest.fn(() => null)
}))

步骤2：修正测试用例逻辑 #

原测试用例存在两处冗余错误：调用了App组件中不存在的input、Add按钮选择器，且用getByLabelText匹配没有关联label的div元素，需要删除冗余代码并调整断言逻辑。

修正后的完整测试代码如下：

import { render, fireEvent } from '@testing-library/react';
import App from './App';
import { SomeComponent } from "@material-ui/core";

// 每次测试前清空mock的调用记录，避免用例之间互相干扰
beforeEach(() => {
  SomeComponent.mockClear();
});

test("点击Anime筛选按钮后正确传递过滤后的数据给SomeComponent", () => {
  const data = [
    { id: 1, type: 'anime', title: 'One Piece' }, 
    { id: 2, type: 'movies', title: 'The Matrix Resurrections' }
  ];

  const { getByText } = render(<App data={data} />);

  // 触发用户交互：点击Anime筛选按钮
  fireEvent.click(getByText('Anime'));

  const filteredData = [{ id: 1, type: 'anime', title: 'One Piece' }];
  // React组件第一个入参是props对象，第二个参数为ref等内置参数，用expect.anything()忽略即可
  expect(SomeComponent).toHaveBeenLastCalledWith(
    expect.objectContaining({ data: filteredData }),
    expect.anything()
  );
});

关于是否符合React Testing Library设计理念的说明 #

RTL提出的「避免测试实现细节」，核心是不要测试用户无法感知的内部逻辑（比如内部state命名、私有函数调用、内部组件嵌套结构等）。你的场景是校验组件和外部依赖的交互契约，不需要关心SomeComponent的内部实现，只需要确认组件基于用户交互生成的props是正确的，这属于合理的测试范围，没有违背RTL的设计原则。

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