TypeError: Cannot read properties of undefined (reading 'pipe')

Question

我正在尝试为以下组件编写一个。我正在使用 queryParams 然后使用 switchmap 来调用服务。这是 url 的样子：

http://localhost:4200/test-fee/details?test_code=PRVFA

组件：

import { Component, OnInit } from '@angular/core';
import { TestFeeService, TestObject } from '../../services/test-fee.service';
import { switchMap } from 'rxjs/operators';
import { ActivatedRoute } from "@angular/router";
import { Observable } from 'rxjs';

@Component({
  selector: 'app-test-fee-code',
  templateUrl: './test-fee-code.component.html',
  styleUrls: ['./test-fee-code.component.scss']
})
export class TestFeeCodeComponent implements OnInit {
  test$: Observable<TestObject>;

  constructor(
    private tfService: TestFeeService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.test$ = this.route.queryParams.pipe(
      switchMap((params) => this.tfService.getByCode(params.test_code))
    );
  }

}

以下测试抛出错误：TypeError: Cannot read properties of undefined (reading 'pipe')

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 testFeeServiceSpy;
  let test$: Observable<TestObject>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestFeeCodeComponent ],
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        { provide: ActivatedRoute, useValue: {params: of({test_code: "PRVFA"})} },
        { provide: TestFeeService, useValue:  testFeeServiceSpy  }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestFeeCodeComponent);
    route = TestBed.inject(ActivatedRoute);
    test$ = TestFeeServiceSpy.getByCode.and.returnValue(of({test_code: "PRVFA"}));
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我没有在网上找到任何关于此类测试的帮助。我假设激活的路由没问题，但我试图获得的服务没有成功。我需要为服务设置模拟数据吗？

Answer 1

我认为你的主要问题是你有 params 而不是 queryParams 而你的组件需要 queryParams.

我要评论了，关注！！评论：

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;
  // !! declare the spy here
  let testFeeServiceSpy: jasmine.SpyObj<TestFeeService>;
  let test$: Observable<TestObject>;

  beforeEach(async(() => {
    // !! assign your testFeeServiceSpy each time in a beforeEach
    // This is important so your spies are fresh for every test
    testFeeServiceSpy = jasmine.createSpyObj<TestFeeService>('TestFeeService', ['getByCode']);
    
    TestBed.configureTestingModule({
      declarations: [ TestFeeCodeComponent ],
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        // !! change params to queryParams here
        { provide: ActivatedRoute, useValue: {queryParams: of({test_code: "PRVFA"})} },
        { provide: TestFeeService, useValue: testFeeServiceSpy  }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestFeeCodeComponent);
    route = TestBed.inject(ActivatedRoute);
    // !! Change the following code and no need to assign it to test$
    testFeeServiceSpy.getByCode.and.returnValue(of({test_code: "PRVFA"}));
    component = fixture.componentInstance;
    // the first fixture.detectChanges is when ngOnInit is called
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

这应该有望解决它。其余的我觉得不错。

TypeError: Cannot read properties of undefined (reading 'pipe')

TypeError: Cannot read properties of undefined (reading 'pipe')

unit-testing

jasmine

karma-jasmine

angular