如何使用React Testing Library测试依赖自定义Hook的组件？

错误原因 #

你在测试函数的顶层直接调用了useMyCustomHook，违反了React Hook的核心规则：Hook只能在函数组件的顶层作用域或其他自定义Hook内部调用，不能在普通函数（比如测试用例函数）中直接执行。

可行解决方案 #

方案1：直接渲染MyComponent进行集成测试 #

既然MyComponent本身就是为MyAnotherComponent提供Hook数据的容器，直接渲染MyComponent就能间接验证MyAnotherComponent的行为，完全符合Hook规则：

test("Test MyAnotherComponent Label", () => {
  render(<MyComponent />);
  expect(screen.getByLabelText("Some Text")).toBeInTheDocument();
});

这种方式属于集成测试，能验证整个组件链路的协作逻辑，适合不需要隔离依赖的场景。

方案2：Mock自定义Hook，单独测试MyAnotherComponent #

如果只想针对MyAnotherComponent做单元测试，隔离useMyCustomHook的依赖，可以用Jest Mock掉这个自定义Hook，返回预设的模拟数据：

// 先mock自定义Hook（路径替换为你的Hook实际路径）
jest.mock('./useMyCustomHook', () => ({
  useMyCustomHook: jest.fn(() => ({
    data: { /* 填入你需要的模拟数据 */ },
    methods: { /* 填入你需要的模拟方法 */ }
  }))
}));

test("Test MyAnotherComponent Label", () => {
  // 直接传入模拟数据给MyAnotherComponent
  const mockData = { /* 模拟数据 */ };
  const mockMethods = { /* 模拟方法 */ };

  render(
    <MyAnotherComponent
      data={mockData}
      label="Some Text"
      method={mockMethods}
    />
  );
  expect(screen.getByLabelText("Some Text")).toBeInTheDocument();
});

这种方式能聚焦MyAnotherComponent本身的逻辑，不受外部Hook的影响。

方案3：用临时测试组件包裹Hook调用 #

如果需要使用真实的useMyCustomHook逻辑，但又不想渲染完整的MyComponent，可以在测试中定义一个临时的函数组件，在组件内部调用Hook并渲染MyAnotherComponent：

test("Test MyAnotherComponent Label", () => {
  // 定义临时组件，在内部调用Hook
  const TestWrapper = () => {
    const { data, methods } = useMyCustomHook({ defaultValues: defaultValues });
    return <MyAnotherComponent data={data} label="Some Text" method={methods} />;
  };

  render(<TestWrapper />);
  expect(screen.getByLabelText("Some Text")).toBeInTheDocument();
});

这种方式既保留了真实Hook的逻辑，又满足了Hook的调用规则。

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