Angular单元测试spyOn使用问题：模拟值未生效仍调用真实服务

嘿，作为Angular新手碰到这种测试问题太正常了，我当初刚学的时候也踩过一模一样的坑！你遇到的核心问题是测试模块里的依赖没被正确替换成模拟对象，导致spyOn根本没作用，反而跑了真实服务的逻辑。咱们一步一步来搞定：

1. 先确保测试模块替换了所有依赖服务 #

首先，你得在TestBed.configureTestingModule里把真实的ServiceProvidersHTTPService和AppConfigService都换成模拟对象——不然TestBed会默认用真实服务，那spyOn自然管不住它。举个具体的例子：

import { of } from 'rxjs';
import { YourComponent } from './your.component';
import { ServiceProvidersHTTPService } from './service-providers-http.service';
import { AppConfigService } from './app-config.service';

// 定义mock服务类
class MockServiceProvidersHTTPService {
  getAllUsers() {
    // 默认返回空数组的可观察对象，不用调用真实的service2
    return of([]);
  }
}

// 定义mock配置服务对象
const mockAppConfigService = {
  getConfig: () => ({ apiUrl: 'mock-url' })
};

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourComponent],
    providers: [
      // 替换真实服务为mock类
      { provide: ServiceProvidersHTTPService, useClass: MockServiceProvidersHTTPService },
      // 替换配置服务为mock对象
      { provide: AppConfigService, useValue: mockAppConfigService }
    ]
  }).compileComponents();
});

2. 正确获取服务实例并设置spy #

一定要从TestBed里获取服务实例，绝对不能自己new一个！因为自己new的是真实服务实例，和TestBed给组件注入的不是同一个，spyOn当然不会生效。看示例：

let component: YourComponent;
let service1: ServiceProvidersHTTPService;
let fixture: ComponentFixture<YourComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  // 从TestBed获取服务实例，这才是组件正在用的那个mock对象
  service1 = TestBed.inject(ServiceProvidersHTTPService);
});

it('should use mock value when calling service1.getAllUsers', () => {
  // 定义你想要的模拟返回值
  const mockUsers = [{ id: 1, name: 'Greg' }, { id: 2, name: 'Test User' }];
  
  // 对TestBed获取到的service1实例设置spy
  spyOn(service1, 'getAllUsers').and.returnValue(of(mockUsers));

  // 调用组件里那个会触发service1的方法
  component.yourComponentMethod();

  // 断言spy被调用过
  expect(service1.getAllUsers).toHaveBeenCalled();
  // 如果组件里把返回值存到了某个属性，也可以断言这个属性的变化
  expect(component.userList).toEqual(mockUsers);
});

3. 检查组件里的依赖注入方式 #

组件里必须通过构造函数注入service1，绝对不能在方法里自己new ServiceProvidersHTTPService()——不然组件用的是自己创建的真实实例，和你测试里spy的mock实例完全没关系。正确的组件写法应该是：

import { Component } from '@angular/core';
import { ServiceProvidersHTTPService } from './service-providers-http.service';

@Component({
  selector: 'app-your',
  templateUrl: './your.component.html'
})
export class YourComponent {
  userList: any[] = [];

  // 构造函数注入service1
  constructor(private service1: ServiceProvidersHTTPService) {}

  yourComponentMethod() {
    this.service1.getAllUsers().subscribe(users => {
      this.userList = users;
    });
  }
}

4. 处理service1依赖service2的情况 #

如果你的service1内部还依赖service2，那你要么在mock服务里直接返回模拟值（不用调用service2），要么在测试模块里也把service2换成mock对象——总之不能让mock的service1去调用真实的service2。

比如如果service1的getAllUsers需要用service2的某个方法，那你可以在测试里单独spyOn mock service1的方法，覆盖它的默认行为，就像上面示例里那样用and.returnValue直接返回模拟的可观察对象。

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