Angular CLI单元测试：Karma/Jasmine创建组件遇NullInjectorError问题

问题原因 #

报错的依赖链ListingsService -> AuthService -> MessageService -> MessageService指向两个核心问题：

1. 测试模块未提供AuthService和MessageService，TestBed尝试实例化真实AuthService时，发现它依赖的MessageService没有被注入
2. 链条末尾的MessageService -> MessageService提示MessageService可能存在循环依赖（比如自身构造函数中注入了自己），或是其提供商配置有误

解决方案 #

方案1：补全测试所需的服务依赖 #

在测试模块的providers中添加AuthService和MessageService的模拟类，避免依赖真实服务的复杂逻辑，确保依赖链完整：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing'; 

import { ListingsComponent } from './listings.component';
import { dummyListings } from 'src/app/dummy data/dummyListings';
import { dummyUsers } from 'src/app/dummy data/dummyUsers';
import { ListingsService } from 'src/app/services/listings.service';
import { JwtHelperService } from '@auth0/angular-jwt';
// 导入缺失的服务
import { AuthService } from 'src/app/services/auth.service';
import { MessageService } from 'src/app/services/message.service';

// 创建模拟类
class MockJwtHelperService {}
class MockAuthService {}
class MockMessageService {}

describe('listings Component', () => {
    let component: ListingsComponent;
    let fixture: ComponentFixture<ListingsComponent>;
    let jwtHelper: JwtHelperService;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [ListingsComponent],
        imports: [HttpClientTestingModule],
        providers: [ 
          ListingsService,
          { provide: JwtHelperService, useClass: MockJwtHelperService },
          { provide: AuthService, useClass: MockAuthService }, // 添加AuthService模拟
          { provide: MessageService, useClass: MockMessageService } // 添加MessageService模拟
        ]
      }).compileComponents();
      fixture = TestBed.createComponent(ListingsComponent);
      jwtHelper = TestBed.inject(JwtHelperService); // Angular 9+推荐用inject替代get
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create the Component', () => {
      expect(component).toBeTruthy();
    });
});

方案2：检查并修复MessageService的循环依赖 #

如果MessageService的构造函数中注入了自身（如下错误代码），会直接导致循环依赖报错：

@Injectable({ providedIn: 'root' })
export class MessageService {
  // 错误：注入自身导致循环依赖
  constructor(private messageService: MessageService) {}
}

此时需要修改MessageService代码，移除这种错误的注入逻辑，确保其依赖链正常。

额外提示 #

• 若AuthService或MessageService本身还有其他依赖，需要在测试模块中一并提供对应的模拟或服务
• 优先使用模拟类而非真实服务，能避免测试被真实服务的复杂逻辑干扰

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