升级Angular 15后单元测试报错：ReferenceError: Window is not defined

1. 测试模块内单独模拟WINDOW注入 #

在对应服务的单元测试文件中，手动为WINDOW提供模拟对象，替换全局依赖：

import { TestBed } from '@angular/core/testing';
import { WindowManagerService } from './window-manager.service';
// 如果用InjectionToken定义WINDOW，需导入对应token
// import { WINDOW } from '../path/to/window.token';

describe('WindowManagerService', () => {
  let service: WindowManagerService;
  // 按需模拟window的属性/方法，比如你的服务用到innerWidth、事件监听等
  const mockWindow = {
    innerWidth: 1920,
    addEventListener: jasmine.createSpy('addEventListener'),
    removeEventListener: jasmine.createSpy('removeEventListener')
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        WindowManagerService,
        // 替换成你实际用的注入标识，字符串或InjectionToken
        { provide: 'WINDOW', useValue: mockWindow }
      ]
    });
    service = TestBed.inject(WindowManagerService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

2. 全局配置模拟window（多测试复用） #

如果多个测试都需要window对象，可在全局测试配置中挂载模拟：

针对Jest环境： #

1. 修改jest.config.js，指定初始化脚本：

module.exports = {
  // 其他配置项
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts']
};

2. 创建src/setup-jest.ts，添加全局模拟：

// 模拟基础window属性，按需扩展
globalThis.window = {
  innerWidth: 1024,
  addEventListener: () => {},
  removeEventListener: () => {},
  location: { href: 'http://localhost:4200' }
} as unknown as Window;

// 同步模拟document和navigator
globalThis.document = window.document;
globalThis.navigator = window.navigator;

针对Karma环境： #

1. 在karma.conf.js的files数组中添加初始化脚本：

files: [
  'src/mock-window.js',
  // 其他测试文件
]

2. 创建src/mock-window.js：

window = {
  innerWidth: 1024,
  addEventListener: function() {},
  // 按需补充属性
};

3. 校验WINDOW注入Token的一致性 #

确认WindowManagerService中注入的WINDOW标识与测试中提供的完全匹配：

• 如果是用字符串token，检查拼写是否一致；
• 如果是InjectionToken，确保测试中导入的token与服务中定义的是同一个，示例定义：

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

export const WINDOW = new InjectionToken<Window>('WindowToken', {
  providedIn: 'root',
  factory: () => window
});

4. 对齐Angular测试依赖版本 #

检查package.json中@angular/core、@angular/core/testing等依赖版本是否统一为Angular 15.x，避免版本不兼容：

{
  "devDependencies": {
    "@angular/core": "^15.2.0",
    "@angular/core/testing": "^15.2.0",
    "@angular/cli": "^15.2.0"
    // 其他依赖...
  }
}

执行npm install或yarn install确保依赖安装完整。

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