Angular测试报错：NullInjectorError 缺少Window对象注入令牌提供者

核心问题分析 #

错误提示NullInjectorError: No provider for InjectionToken Window object!说明测试模块的依赖注入容器中没有找到WINDOW注入令牌的提供者，即便你已经定义了相关provider和service，大概率是测试模块的配置存在疏漏。

具体解决步骤 #

1. 验证WINDOW注入令牌与提供者的定义

确保Window.provider.ts中的代码正确无误：

import { InjectionToken, Provider } from '@angular/core';

// 定义注入令牌
export const WINDOW = new InjectionToken<Window>('Window object');

// 定义提供者数组
export const WINDOW_PROVIDERS: Provider[] = [
  {
    provide: WINDOW,
    useValue: window // 生产环境使用真实window，测试时可替换为模拟对象
  }
];

2. 修正测试模块的提供者配置

在flight-index.component.spec.ts中，确保TestBed.configureTestingModule的providers数组正确导入并包含WINDOW_PROVIDERS和WindowService，同时检查路径是否正确：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FlightIndexComponent } from './flight-index.component';
import { WINDOW_PROVIDERS } from '../path-to/window.provider'; // 替换为实际路径
import { WindowService } from '../path-to/window.service'; // 替换为实际路径

describe('FlightIndexComponent', () => {
  let component: FlightIndexComponent;
  let fixture: ComponentFixture<FlightIndexComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FlightIndexComponent],
      providers: [
        WINDOW_PROVIDERS,
        WindowService
        // 如果WINDOW_PROVIDERS不生效，可直接显式提供令牌：
        // { provide: WINDOW, useValue: window }
      ]
    }).compileComponents();
  });

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

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

3. 检查WindowService的注入逻辑

确认WindowService中正确使用@Inject(WINDOW)注入令牌，无拼写或导入错误：

import { Injectable, Inject } from '@angular/core';
import { WINDOW } from './window.provider';

@Injectable({
  providedIn: 'root'
})
export class WindowService {
  constructor(@Inject(WINDOW) private readonly window: Window) {}

  // 示例方法
  getWindowLocation(): Location {
    return this.window.location;
  }
}

4. 可选：测试环境模拟Window对象

为避免依赖真实浏览器环境的window，可在测试中提供模拟对象，提升测试稳定性：

providers: [
  WindowService,
  {
    provide: WINDOW,
    useValue: {
      location: { href: 'http://test-url.com' },
      // 根据组件/服务的需求，添加其他需要模拟的属性或方法
    } as unknown as Window
  }
]

5. 排查模块层级的提供者覆盖问题

如果FlightIndexComponent所在的NgModule已经配置了WINDOW_PROVIDERS，但测试模块不会自动继承模块的提供者，必须在测试模块中显式声明。

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