Angular管道单元测试Mock服务时遭遇Service未定义错误

看起来你遇到的核心问题是：管道依赖的服务没有被正确注入到测试环境中，导致调用transformDateToApi时出现undefined错误。其实管道的Mock实现逻辑和组件本质上是一致的，只是测试配置的细节需要注意——必须确保在测试模块中正确声明管道，并提供其依赖的Mock服务。

问题根源分析 #

你的DatePipe应该在构造函数中注入了一个包含transformDateToApi方法的服务（比如DateFormatService），但测试时没有在TestBed中提供这个服务的Mock版本，导致管道实例化时依赖的服务为undefined。

正确的测试配置示例 #

假设你的管道依赖的服务是DateFormatService，下面是完整的可运行测试代码：

import { TestBed } from '@angular/core/testing';
import { DatePipe } from './date.pipe';
// 导入你管道依赖的服务类型
import { DateFormatService } from '@app/your-path-to-service';

describe('DatePipe', () => {
  let pipe: DatePipe;
  // 创建Mock服务对象，包含需要模拟的方法
  let mockDateFormatService: jasmine.SpyObj<DateFormatService>;

  beforeEach(() => {
    // 用jasmine spyObj快速创建带指定方法的Mock
    mockDateFormatService = jasmine.createSpyObj('DateFormatService', ['transformDateToApi']);

    TestBed.configureTestingModule({
      // 必须声明要测试的管道
      declarations: [DatePipe],
      // 提供Mock服务，替代真实服务注入到管道中
      providers: [
        { provide: DateFormatService, useValue: mockDateFormatService }
      ]
    });

    // 从TestBed中获取管道实例（此时依赖的Mock服务已注入）
    pipe = TestBed.inject(DatePipe);
  });

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

  it('should delegate date transformation to the service', () => {
    // 给Mock方法设置预期返回值
    const mockApiDate = '2024-05-20';
    mockDateFormatService.transformDateToApi.and.returnValue(mockApiDate);

    // 调用管道的transform方法
    const testDate = new Date(2024, 4, 20); // 注意月份是0-based
    const result = pipe.transform(testDate);

    // 验证Mock方法被正确调用
    expect(mockDateFormatService.transformDateToApi).toHaveBeenCalledWith(testDate);
    // 验证管道返回了Mock服务的结果
    expect(result).toBe(mockApiDate);
  });
});

关键注意点 #

1. 必须声明管道：在TestBed.configureTestingModule的declarations数组中加入你的DatePipe，否则TestBed无法创建管道实例。
2. 正确提供Mock服务：通过providers数组配置依赖替换，用useValue传入我们创建的SpyObj，确保管道构造函数能拿到有效的服务实例。
3. 验证管道逻辑：通过Mock服务的and.returnValue设置返回值，既可以测试管道的逻辑正确性，也能验证管道是否正确调用了依赖服务的方法。

额外排查点 #

如果还是报错，检查你的管道实现是否正确注入了服务：

// date.pipe.ts 示例
import { Pipe, PipeTransform } from '@angular/core';
import { DateFormatService } from '@app/your-path-to-service';

@Pipe({ name: 'customDate' })
export class DatePipe implements PipeTransform {
  // 确保构造函数正确注入了服务
  constructor(private dateFormatService: DateFormatService) {}

  transform(value: Date): string {
    return this.dateFormatService.transformDateToApi(value);
  }
}

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