如何用Jest模拟模块指定组件且无需重构按钮结构？

错误原因 #

你之前的写法会报错，是因为Mock的Button组件返回了jest.fn()（一个函数），但React组件必须返回有效的React节点（JSX、null等），直接返回函数不符合React的渲染要求。

最佳实现方式 #

方式一：追踪组件渲染+支持交互测试（最常用）

这种方式不用重复原Button的复杂结构，只返回基础的可点击按钮，同时用jest.fn()包裹组件，既能追踪组件的渲染情况，又能正常传递props和处理交互：

// 定义Mock Button组件，保留children和所有props
const MockedButton = jest.fn(({ children, ...props }) => (
  <button {...props}>{children}</button>
));

// 模拟@moduleComponents模块，保留其他真实组件，仅替换Button
jest.mock('@moduleComponents', () => ({
  ...jest.requireActual('@moduleComponents'),
  Button: MockedButton,
}));

test('按钮点击触发处理逻辑', () => {
  render(<MyComponent />);
  const button = screen.getByText('My Button');
  
  fireEvent.click(button);
  
  // 验证Button组件是否被渲染（可选）
  expect(MockedButton).toHaveBeenCalled();
  // 若要验证自定义的onClickHandler是否触发，需将其暴露或用jest.spyOn追踪
});

方式二：仅交互测试（简洁版）

如果不需要追踪组件的渲染，只需要测试点击交互逻辑，可以直接返回基础按钮，不用jest.fn()包裹：

jest.mock('@moduleComponents', () => ({
  ...jest.requireActual('@moduleComponents'),
  Button: ({ children, ...props }) => <button {...props}>{children}</button>,
}));

test('按钮点击触发自定义处理函数', () => {
  // 假设自定义处理函数可被监听，比如提取为外部函数或通过props传入
  const mockOnClickHandler = jest.fn();
  render(<MyComponent onClickHandler={mockOnClickHandler} />);
  
  const button = screen.getByText('My Button');
  fireEvent.click(button);
  
  expect(mockOnClickHandler).toHaveBeenCalledTimes(1);
});

方式三：仅验证组件渲染（无交互）

如果只需要确认Button组件是否被渲染，不需要交互，可以返回null，但这种方式无法测试点击事件：

const MockedButton = jest.fn(() => null);

jest.mock('@moduleComponents', () => ({
  ...jest.requireActual('@moduleComponents'),
  Button: MockedButton,
}));

test('Button组件已渲染', () => {
  render(<MyComponent />);
  expect(MockedButton).toHaveBeenCalled();
});

总结 #

• 优先选方式一，兼顾渲染追踪和交互测试，且无需重复原组件结构；
• 若仅需测试交互逻辑，选方式二更简洁；
• 仅验证组件是否存在时，用方式三。

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