型別錯誤：無法讀取未定義的屬性（讀取“管道”）

我正在嘗試為以下組件撰寫一個。我正在使用queryParams然后switchmap呼叫服務。這是網址的樣子：

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();
  });
});

我沒有在網上找到有關此類測驗的任何幫助。我假設激活的路由沒問題，但我試圖獲得的服務沒有成功。我需要為服務設定模擬資料嗎？

uj5u.com熱心網友回復：

我認為您的主要問題是您擁有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();
  });
});

那應該有希望解決它。其余的我覺得不錯。

標籤：有角的 单元测试 茉莉花 业力茉莉

上一篇：Cron的Jest單元測驗

下一篇：如何使用Jest在ReactNative中模擬“react-native-config”庫的配置資料？