Angular测试报错：Property does not exist on type问题求助

错误根源 #

1. 组件中服务注入的命名错误：你大概率在组件里把服务实例误写为类名（BackupUsersService），但规范的注入应该是小写开头的实例名（比如backupUsersService），导致component.BackupUsersService根本不存在。
2. spyOn用法错误：你错误地将spyOn的返回值（间谍函数）当成服务实例访问，触发类型校验错误。
3. 未正确获取服务实例：直接从组件访问私有服务实例通常不可行，应该通过TestBed或组件注入器获取。

修正步骤 #

1. 先修正组件中的服务注入

确保组件里的服务注入是正确的私有实例：

// backup-tasks.component.ts
import { Component } from '@angular/core';
import { BackupUsersService } from '../backup-users.service';

@Component({
  selector: 'app-backup-tasks',
  templateUrl: './backup-tasks.component.html'
})
export class BackupTasksComponent {
  // 私有注入服务，实例名小写开头
  constructor(private backupUsersService: BackupUsersService) {}

  getBackupUsers() {
    // 调用实例的方法
    return this.backupUsersService.getBackupUsers();
  }
}

2. 修正测试代码

import { BackupTasksComponent } from './backup-tasks.component';
import { BackupUsersService } from '../backup-users.service';
import { Observable } from 'rxjs';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

const mockUsers = [
  { name: 'test', age: 12, adult: false }
];

class MockBackupUsersService {
  getBackupUsers() {
    return new Observable(observer => {
      observer.next(mockUsers);
      observer.complete(); // 补充complete避免内存泄漏
    });
  }
}

let fixture: ComponentFixture<BackupTasksComponent>;
let component: BackupTasksComponent;
let backupUsersService: BackupUsersService; // 单独声明服务实例

describe('BackupTasksComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [BackupTasksComponent],
      providers: [
        { provide: BackupUsersService, useClass: MockBackupUsersService }
      ]
    })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(BackupTasksComponent);
      component = fixture.componentInstance;
      // 通过TestBed获取服务实例
      backupUsersService = TestBed.inject(BackupUsersService);
    });
  }));

  it('should call getBackupUsers method on BackupUsersService', () => {
    // 对服务实例的方法打间谍
    const getUsersSpy = spyOn(backupUsersService, 'getBackupUsers').and.callThrough();

    // 调用组件方法
    component.getBackupUsers();

    // 断言方法被调用
    expect(getUsersSpy).toHaveBeenCalled();
    // 或者直接断言服务方法：expect(backupUsersService.getBackupUsers).toHaveBeenCalled();
  });
});

关键修正说明 #

• 获取服务实例：用TestBed.inject(BackupUsersService)获取服务，不管组件里的服务是私有还是公有，都能拿到实例。
• 正确使用spyOn：第一个参数是服务实例，第二个是方法名，返回的间谍函数可以直接用于断言，或者通过服务实例的方法断言。
• 补充complete()：Mock的Observable必须调用complete()，避免测试结束后残留订阅导致内存泄漏。
• 规范命名：测试块用组件名命名，变量名清晰，符合Angular测试的最佳实践。

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