Angular单元测试报Cannot read 'pipe' of undefined错误如何解决

错误根因 #

你遇到的Cannot read properties of undefined (reading 'pipe')报错是两个配置错误共同导致的：

• 模拟的ActivatedRoute属性不匹配：组件代码中读取的是route.queryParams，但测试代码里给ActivatedRoute只提供了params属性，导致queryParams为undefined，调用pipe方法直接报错
• 模拟服务变量未正确赋值：你通过jasmine.createSpyObj创建的服务spy存在TestFeeServiceSpy常量中，但providers里注入的是未初始化的testFeeServiceSpy空变量，导致TestFeeService实例为undefined

修正后的测试代码 #

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ActivatedRoute } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { of, Observable } from 'rxjs';

import { TestFeeCodeComponent } from './test-fee-code.component';
import { TestFeeService, TestObject } from 'src/app/services/test-fee.service';

describe('TestFeeCodeComponent', () => {
  let component: TestFeeCodeComponent;
  let fixture: ComponentFixture<TestFeeCodeComponent>;
  let route: ActivatedRoute;
  // 统一模拟服务变量
  const testFeeServiceSpy = jasmine.createSpyObj('TestFeeService', [ 'getByCode' ]);
  let mockTestObj: TestObject = {test_code: "PRVFA"};

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestFeeCodeComponent ],
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        // 改为提供queryParams，匹配组件代码
        { provide: ActivatedRoute, useValue: {queryParams: of({test_code: "PRVFA"})} },
        { provide: TestFeeService, useValue: testFeeServiceSpy }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    // 提前给服务spy设置返回值，组件初始化时就可以调用到
    testFeeServiceSpy.getByCode.and.returnValue(of(mockTestObj));
    fixture = TestBed.createComponent(TestFeeCodeComponent);
    route = TestBed.inject(ActivatedRoute);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
    // 可选验证：服务方法被正确调用，参数和路由参数一致
    expect(testFeeServiceSpy.getByCode).toHaveBeenCalledWith('PRVFA');
  });
});

额外说明 #

你提到的「是否需要为服务设置模拟数据」是必要的，因为单元测试不需要真实调用后端接口，通过spy模拟返回值即可覆盖组件逻辑，上述代码中testFeeServiceSpy.getByCode.and.returnValue(of(mockTestObj))就是在配置模拟返回数据。

内容的提问来源于stack exchange，提问作者S. Varner