Angular单元测试中如何Mock/Spy导入的函数？

当然可以Mock这个独立函数啦，完全不用改动你的组件实现！我给你整理了几种靠谱的方案，都是实际项目里常用的：

方案1：利用模块命名空间创建Spy（Jasmine/Karma环境） #

你之前尝试spyOn没成功，大概率是没找对正确的操作对象。其实可以把整个辅助模块导入成一个命名空间，然后对这个命名空间里的函数创建Spy：

在你的单元测试文件里这么写：

// 先把整个helper模块导入为一个对象
import * as helper from './helper';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  });

  it('应该在doSomething返回{ something: 1 }时返回1', () => {
    // 创建spy并指定返回值
    spyOn(helper, 'doSomething').and.returnValue({ something: 1 });
    
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    expect(component.test()).toBe(1);
  });

  it('应该在doSomething返回{ something: null }时返回2', () => {
    spyOn(helper, 'doSomething').and.returnValue({ something: null });
    
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    expect(component.test()).toBe(2);
  });
});

这样就能完美控制doSomething的返回值，完全不用修改组件代码。

方案2：使用Jest的模块Mock（如果项目用Jest测试） #

如果你的项目用Jest代替Karma/Jasmine，操作会更简单，直接用jest.mock来Mock整个辅助模块：

// Mock整个helper模块
jest.mock('./helper', () => ({
  doSomething: jest.fn()
}));

import { doSomething } from './helper';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  it('当doSomething返回{ something:1 }时返回1', () => {
    (doSomething as jest.Mock).mockReturnValue({ something: 1 });
    const component = new AppComponent();
    expect(component.test()).toBe(1);
  });

  it('当doSomething返回{ something: null }时返回2', () => {
    (doSomething as jest.Mock).mockReturnValue({ something: null });
    const component = new AppComponent();
    expect(component.test()).toBe(2);
  });
});

为什么你之前的尝试没成功？ #

• 你说spyOn无效，是因为你没有把函数绑定到模块命名空间上，直接spyOn函数本身是不行的，必须spyOn它所属的模块对象
• 把Mock函数加到imports数组里肯定报错，因为imports是用来加载Angular模块的，普通函数根本不是NgModule，当然会报错
• 用服务封装确实可行，但完全没必要，属于过度设计，上面两种方案都能直接解决问题

如果是第三方库的函数（比如lodash的某个方法），思路也是一样的：导入整个库的命名空间，然后spyOn对应的方法就行。比如：

import * as _ from 'lodash';

// 测试里可以这么写：
spyOn(_, 'someLodashMethod').and.returnValue(xxx);

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