如何测试使用Angular 15 inject()注入依赖的自定义管道？

问题场景 #

在全新的Angular 15 CLI项目中，存在以下最简示例：

• 一个空白的HelperService服务
• 通过inject()调用将该服务注入到DemoPipe中：

export class DemoPipe implements PipeTransform {
  private readonly helper = inject(HelperService);
  // ... 其他管道逻辑
}

Angular CLI生成的默认管道测试会失败，原因是直接通过new创建实例时，构造函数调用处于DI上下文之外：

it('create an instance', () => {
  const pipe = new DemoPipe();
  expect(pipe).toBeTruthy();
});

对应的错误信息：

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`.
        error properties: Object({ code: -203 })

解决方案 #

不需要额外的Karma包装器，直接借助Angular自带的测试工具即可提供合法的DI上下文，有两种常用方式：

方式一：使用TestBed创建管道实例 #

通过TestBed配置测试模块，声明管道并提供依赖服务，再通过TestBed.inject()获取实例：

import { TestBed } from '@angular/core/testing';
import { DemoPipe } from './demo.pipe';
import { HelperService } from './helper.service';

describe('DemoPipe', () => {
  it('create an instance', () => {
    TestBed.configureTestingModule({
      providers: [HelperService],
      declarations: [DemoPipe]
    });

    const pipe = TestBed.inject(DemoPipe);
    expect(pipe).toBeTruthy();
  });
});

方式二：使用EnvironmentInjector手动创建上下文 #

通过EnvironmentInjector.create()创建注入器，再调用runInContext()方法在DI上下文中实例化管道：

import { EnvironmentInjector } from '@angular/core';
import { DemoPipe } from './demo.pipe';
import { HelperService } from './helper.service';

describe('DemoPipe', () => {
  it('create an instance', () => {
    const injector = EnvironmentInjector.create({
      providers: [HelperService]
    });

    const pipe = injector.runInContext(() => new DemoPipe());
    expect(pipe).toBeTruthy();
  });
});

以上两种方式都能让inject()调用处于合法的DI上下文，解决NG0203错误。

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