Angular登录组件单元测试报错：Cannot read properties of undefined (reading 'subscribe')

错误根源 #

这个错误的核心是测试环境中LoginService的login方法未被正确模拟，导致返回了undefined，组件代码尝试对undefined调用subscribe方法触发报错。实际运行时服务能正常注入且返回合法Observable，但单元测试需要手动模拟依赖服务的行为。

具体修复步骤 #

结合Angular单元测试的常规写法，按以下方式调整代码：

1. 正确模拟LoginService #

在测试文件中，用Jasmine的createSpyObj创建服务的模拟对象，确保login方法返回合法的Observable：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';
import { of } from 'rxjs';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let mockLoginService: jasmine.SpyObj<LoginService>;

  beforeEach(async () => {
    // 创建带login方法的mock服务
    mockLoginService = jasmine.createSpyObj('LoginService', ['login']);
    // 让login方法返回模拟的Observable响应
    mockLoginService.login.and.returnValue(of({ token: 'mock-auth-token' }));

    await TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      // 用mock服务替换真实服务
      providers: [
        { provide: LoginService, useValue: mockLoginService }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create component', () => {
    expect(component).toBeTruthy();
  });

  it('should trigger login service on form submit', () => {
    const testCredentials = { username: 'test-user', password: 'test-pass' };
    component.onSubmit(testCredentials);
    expect(mockLoginService.login).toHaveBeenCalledWith(testCredentials);
  });
});

2. 检查组件调用逻辑 #

确保组件中调用loginService.login的代码无语法错误，比如参数传递正确：

// LoginComponent示例代码
import { Component } from '@angular/core';
import { LoginService } from './login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(private loginService: LoginService) {}

  onSubmit(credentials: { username: string; password: string }) {
    // 确认此处调用的login方法返回Observable
    this.loginService.login(credentials).subscribe({
      next: (res) => {
        // 登录成功处理逻辑
      },
      error: (err) => {
        // 错误处理逻辑
      }
    });
  }
}

3. 验证真实服务的返回值 #

确认LoginService的login方法确实返回Observable：

// LoginService示例代码
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  constructor(private http: HttpClient) {}

  login(credentials: { username: string; password: string }): Observable<any> {
    // 确保返回的是Observable，而非undefined
    return this.http.post('/api/auth/login', credentials);
  }
}

常见误区提醒 #

• 测试时禁止直接使用依赖HTTP请求的真实服务，必须模拟
• 模拟服务方法时，返回值必须匹配组件预期的类型（比如Observable），不能让方法返回undefined
• 若组件包含表单逻辑，需确保测试中表单触发后正确调用了登录方法

内容的提问来源于stack exchange，提问作者Dhruv Singh Pal