Angular单元测试中的Mock与Spy技术详解

在Angular应用开发中，单元测试是保证代码质量的重要手段。本文将深入探讨如何在Angular单元测试中使用Mock和Spy技术来隔离依赖，实现真正的单元测试。

为什么需要Mock和Spy

在真实的应用中，组件通常会依赖服务或其他组件。以LoginComponent为例，它依赖于AuthService来判断用户是否已认证：

@Component({
  selector: 'app-login',
  template: `<a [hidden]="needsLogin()">Login</a>`
})
export class LoginComponent {
  constructor(private auth: AuthService) {}

  needsLogin() {
    return !this.auth.isAuthenticated();
  }
}

如果直接使用真实的AuthService进行测试，会有以下问题：

1. 测试耦合度高：测试代码需要了解AuthService的内部实现细节
2. 测试脆弱：如果AuthService的实现方式改变（如从localStorage改为cookie），测试就会失败
3. 测试复杂度高：当依赖增多时，测试需要处理大量依赖的初始化

Mock的三种实现方式

1. 使用伪造类(Fake Class)

创建完全独立的Mock类来替代真实服务：

class MockAuthService {
  authenticated = false;

  isAuthenticated() {
    return this.authenticated;
  }
}

在测试中使用这个Mock类：

beforeEach(() => {
  service = new MockAuthService();
  component = new LoginComponent(service);
});

it('should return true when not authenticated', () => {
  service.authenticated = false;
  expect(component.needsLogin()).toBeTruthy();
});

优点：

• 完全解耦，不依赖真实服务
• 测试更稳定，不受服务实现变化影响

2. 继承并重写方法

通过继承真实服务并重写特定方法：

class MockAuthService extends AuthService {
  authenticated = false;

  isAuthenticated() {
    return this.authenticated;
  }
}

适用场景：

• 当服务较复杂，完全重写成本高时
• 只需要修改少量方法行为时

3. 使用Spy监控真实实例

Jasmine提供的spyOn功能可以监控和修改真实实例的方法行为：

beforeEach(() => {
  service = new AuthService();
  component = new LoginComponent(service);
});

it('should call isAuthenticated', () => {
  const spy = spyOn(service, 'isAuthenticated').and.returnValue(false);
  expect(component.needsLogin()).toBeTruthy();
  expect(spy).toHaveBeenCalled();
});

Spy的强大功能：

• .and.returnValue(value)：强制返回指定值
• .and.callFake(fn)：使用自定义函数替代
• .and.throwError(msg)：模拟抛出错误
• .and.callThrough()：调用原始实现

测试最佳实践

1. 单一职责原则：每个测试只验证一个行为
2. 明确断言：不仅要验证返回值，还要验证交互行为
3. 清理工作：使用afterEach清理测试环境
4. 描述清晰：测试描述应清晰表达预期行为

总结

在Angular单元测试中，合理使用Mock和Spy技术可以：

1. 实现真正的隔离测试
2. 提高测试的稳定性和可维护性
3. 简化复杂依赖场景下的测试
4. 更精准地验证组件行为

选择哪种Mock方式取决于具体场景，简单依赖可以使用Fake Class，复杂依赖可以考虑Spy，而继承重写则适合部分定制的场景。掌握这些技术将显著提升你的Angular单元测试能力。