Jest测试报错：无法找到'@lib/components'模块，如何Mock组件？

你的错误是因为Jest在测试环境中无法解析@lib/components这个第三方模块，直接用spyOn无法生效，需要先Mock整个模块，再指定Comp1的实现，以下是两种可行方案：

方案一：保留其他组件原有实现，仅Mock Comp1 #

这种方式适合你需要用到库中其他组件的真实实现，只替换Comp1的场景：

// 先Mock整个模块，保留其他组件的原有逻辑
jest.mock('@lib/components', () => ({
  ...jest.requireActual('@lib/components'),
  Comp1: jest.fn(() => <div data-testid='test'>test</div>)
}));

import * as ComponentsLib from '@lib/components';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

const setup = () => {
  render(<MyComponent />);
};

it('renders correctly', () => {
  setup();
  expect(screen.queryByTestId('test')).toBeTruthy();
  // 可选：验证Comp1组件是否被调用
  expect(ComponentsLib.Comp1).toHaveBeenCalled();
});

方案二：完全Mock模块，仅暴露需要的Comp1 #

如果你的测试只关心Comp1，不需要库中其他组件，可直接简化Mock：

jest.mock('@lib/components', () => ({
  Comp1: jest.fn(() => <div data-testid='test'>test</div>)
}));

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

const setup = () => {
  render(<MyComponent />);
};

it('renders correctly', () => {
  setup();
  expect(screen.queryByTestId('test')).toBeTruthy();
});

关键说明 #

之前的spyOn写法失效的核心原因是：Jest找不到未被Mock的@lib/components模块，必须先通过jest.mock让Jest识别该模块，才能对其中的组件进行Mock或监听调用。

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