Angular Jasmine测试报错：undefined读取pipe属性异常

运行抛出cannot read properties of undefined (reading pipe)错误及测试不通过问题，由以下几个问题共同导致：

• 核心触发报错原因：业务代码中service2.getData()的返回值是RxJS Observable类型（代码中直接在返回值上调用.pipe()操作符），但测试mock逻辑写的是service2Spy.getData.and.returnValue(Promise.resolve(of(response)))，实际返回的是Promise对象。Promise实例本身没有pipe方法，调用时自然会抛出找不到方法的错误。
• 依赖注入配置缺失：TestBed的providers数组中没有声明Service1本身、Service3的依赖提供规则，测试框架无法正确实例化待测试服务。
• 基础语法错误：beforeEach块中给service1、service2Spy赋值时错用了对象属性的冒号:语法，应该使用赋值等号=，导致变量实际未被正确赋值，拿到的是undefined值。
• 异步测试写法错误：Jasmine的done回调需要作为测试用例函数的入参传入，错写成function done()的函数命名形式会导致异步测试流程无法正常触发完成标记。
• 依赖mock不全：没有对service3.setData方法做桩实现，Observable流执行到map操作时会找不到对应方法报错。

以下代码可以覆盖要求的三个测试场景，直接替换原有测试代码即可：

import { of } from 'rxjs';
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
// 按项目实际路径导入对应服务、工具类
import { Service1 } from './service1';
import { Service2 } from './service2';
import { Service3 } from './service3';
import { Utilty } from './utility';

describe('service1', () => {
  let service1: Service1;
  let service2Spy: jasmine.SpyObj<Service2>;
  let service3Spy: jasmine.SpyObj<Service3>;
  // 定义测试用固定模拟数据
  const mockRawResponse = { id: 'abc', name: 'testData' };
  const mockProcessedResponse = { ...mockRawResponse, processed: true };
  const expectedRequestUrl = Utilty.format('abc');

  beforeEach(() => {
    // 提前创建所有依赖服务的spy对象
    const spyForService2 = jasmine.createSpyObj('Service2', ['getData']);
    const spyForService3 = jasmine.createSpyObj('Service3', ['setData']);

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // 不需要重复导入HttpClientModule，TestingModule已包含相关测试依赖
      providers: [
        Service1, // 必须声明待测试服务本身
        { provide: Service2, useValue: spyForService2 },
        { provide: Service3, useValue: spyForService3 }
      ]
    });

    // 赋值使用等号，不要用冒号
    service1 = TestBed.inject(Service1); // 高版本Angular推荐用inject替代已废弃的get方法
    service2Spy = TestBed.inject(Service2) as jasmine.SpyObj<Service2>;
    service3Spy = TestBed.inject(Service3) as jasmine.SpyObj<Service3>;

    // 配置service3的默认mock返回
    service3Spy.setData.and.returnValue(mockProcessedResponse);
  });

  it('getDetails应满足调用逻辑、传参、返回值的三项校验规则', (done) => {
    // 正确mock getData返回值：直接返回Observable，不需要额外包Promise
    service2Spy.getData.and.returnValue(of(mockRawResponse));

    service1.getDetails('abc').then((result) => {
      // 场景1：验证getData方法被正常调用
      expect(service2Spy.getData).toHaveBeenCalledTimes(1);
      // 场景2：验证调用getData时传入的参数符合预期
      expect(service2Spy.getData).toHaveBeenCalledWith(expectedRequestUrl);
      // 场景3：验证返回结果为经过service3处理的正确值
      expect(service3Spy.setData).toHaveBeenCalledWith(mockRawResponse);
      expect(result).toEqual(mockProcessedResponse);
      done();
    });
  });
});

• 不要给Observable套多余的Promise包装：service2.getData本身返回Observable，后续的.toPromise()是业务代码内部实现的逻辑，mock时只需要返回Observable即可。
• 不需要在测试imports中同时导入HttpClientModule和HttpClientTestingModule，后者已经包含HTTP相关的测试依赖，同时导入反而可能引发注入冲突。
• RxJS流的this绑定问题：如果service3.setData方法内部依赖service3的this上下文，记得在业务代码或者mock逻辑中做bind处理，避免上下文丢失报错。

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