如何测试Angular应用中用户是否已登录？遇authenticate未定义错误

这个错误的核心原因是测试环境中没有为LoginComponent正确注入AuthenticationService，组件实例化时依赖的服务未被提供，导致this.authenticationService为undefined。

以下是完整的测试配置和用例示例，针对你的checkLogin函数编写：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
import { AuthenticationService } from '../../services/authentication.service';
import { Router } from '@angular/router';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  // 声明服务的mock/spy对象
  let authServiceSpy: jasmine.SpyObj<AuthenticationService>;
  let routerSpy: jasmine.SpyObj<Router>;

  beforeEach(async () => {
    // 创建服务的spy对象，模拟所需方法
    authServiceSpy = jasmine.createSpyObj('AuthenticationService', ['authenticate']);
    routerSpy = jasmine.createSpyObj('Router', ['navigate']);

    await TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      // 提供mock的服务替代真实服务
      providers: [
        { provide: AuthenticationService, useValue: authServiceSpy },
        { provide: Router, useValue: routerSpy }
      ]
    })
    .compileComponents();
  });

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

  it('should set invalidLogin to false when authentication succeeds', () => {
    // 模拟authenticate方法返回true
    authServiceSpy.authenticate.and.returnValue(true);
    
    component.checkLogin();
    
    expect(component.invalidLogin).toBeFalse();
    expect(routerSpy.navigate).toHaveBeenCalledWith(['']);
    expect(authServiceSpy.authenticate).toHaveBeenCalledWith('TestUser', 'TestPassword');
  });

  it('should set invalidLogin to true when authentication fails', () => {
    // 模拟authenticate方法返回false
    authServiceSpy.authenticate.and.returnValue(false);
    
    component.checkLogin();
    
    expect(component.invalidLogin).toBeTrue();
    expect(routerSpy.navigate).not.toHaveBeenCalled();
  });
});

关键步骤说明 #

• 创建Spy对象：用jasmine.createSpyObj创建服务的模拟对象，只保留测试需要的方法（比如authenticate和navigate），避免依赖真实服务的实现细节。
• 配置测试模块：在TestBed.configureTestingModule的providers数组中，用mock对象替代真实的AuthenticationService和Router，确保组件能获取到有效的服务实例。
• 模拟方法返回值：在每个测试用例中，通过and.returnValue设置authenticate方法的返回结果，分别验证登录成功和失败的场景。

这样配置后，组件就能正确获取到authenticationService的实例，不会再出现undefined的错误。

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