Angular测试中用useValue提供environment抛出NullInjectorError问题

方法1：单测模块中手动添加提供者 #

每个依赖environment的测试用例里，在TestBed.configureTestingModule中补充对应的提供者配置：

import { environment } from '../../environments/environment';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    providers: [
      { provide: 'environment', useValue: environment },
      // 其他依赖服务
    ]
  }).compileComponents();
});

方法2：创建全局测试配置复用 #

如果多个测试文件都需要该提供者，可封装一个全局配置函数统一处理：

// test-global-setup.ts
import { TestBed } from '@angular/core/testing';
import { environment } from '../environments/environment';

export function setupTestBedWithEnv() {
  TestBed.configureTestingModule({
    providers: [
      { provide: 'environment', useValue: environment }
    ]
  });
}

在测试文件中调用该函数：

import { setupTestBedWithEnv } from './test-global-setup';

beforeEach(async () => {
  await setupTestBedWithEnv();
  // 当前测试的额外配置
});

方法3：用overrideProvider追加配置 #

如果已有基础测试模块配置，可通过overrideProvider单独补充environment提供者：

import { environment } from '../../environments/environment';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    // 已有的模块、服务配置
  })
  .overrideProvider('environment', { useValue: environment })
  .compileComponents();
});

方法4：配置专属测试环境变量（推荐） #

在environments目录下创建environment.test.ts，定义测试环境专属变量；然后修改angular.json的test配置，指定测试时的文件替换规则：

"test": {
  "options": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  }
}

之后测试中导入的environment会自动指向测试版本，直接沿用运行时的提供者配置即可。

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