Angular Testing - TypeError: Cannot read property '7' of undefined

Question

我是 Angular 测试的新手，我正在努力使这个测试工作，但找不到解决这个问题的方法。如果有人有什么想法，请。

TypeError: Cannot read property '7' of undefined at at AnaliseContasTitularComponent.ngOnInit (http://localhost:9876/karma_webpack/src/app/extratos-mensais-interno/analise-contas-titular/analise-contas-titular.component.ts:103:2)

正在执行此命令以执行测试：

ng test --codeCoverage=true --progress=false --watch=false

我的测试单元文件：

import { Overlay } from '@angular/cdk/overlay';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { InjectionToken } from '@angular/core';
import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RouterTestingModule } from '@angular/router/testing';
import { AnaliseContasTitularComponent } from './analise-contas-titular.component';

import { ExtratosMensaisInternoService } from '../extratos-mensais-interno.service';

describe('AnaliseContasTitularComponent', () => {
  let component: AnaliseContasTitularComponent;
  let fixture: ComponentFixture<AnaliseContasTitularComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule, HttpClientTestingModule ],
      declarations: [ AnaliseContasTitularComponent ],
      providers: [ MatDialog, Overlay, MatSnackBar,
        { provide: InjectionToken, useValue: {} },
        { provide: MAT_DIALOG_SCROLL_STRATEGY, useValue: {} },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AnaliseContasTitularComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  

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

.ts 文件上的 ngOnInit 方法：

ngOnInit(): void {
    const competencia: CompetenciaInterno = this.serv.getCompetenciaSelecionada();

    this.serv.getExtratoMensal(competencia[7]).subscribe((res: ExtratoMensalData) => {
      this.extratoMensal = res.data;
    }, (error: HttpErrorResponse) => {
      this.utils.showDialogError(error);
    });

  }

和服务文件，使用由 ngOnInit 调用的方法：

getCompetenciaSelecionada(): CompetenciaInterno {
    return JSON.parse(sessionStorage.getItem('competenciaInterno'));
  }

我在 Internet 上找不到以有效方式处理模拟数据的示例。

我只需要停止这个错误，因为我有多个文件发生同样的错误。让我继续进行其他测试。

谢谢

Answer 1

我假设 getCompetenciaSelecionada 住在 ExtratosMensaisInternoService，如果是这样，您必须模拟此服务。

您可以附加 sessionStorage 中的项目，也许这会起作用，但我喜欢模拟外部依赖项。

试试这个：

// import of to be able to mock respond with an observable for getExtratoMensal
import { of } from 'rxjs';
import { Overlay } from '@angular/cdk/overlay';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { InjectionToken } from '@angular/core';
import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RouterTestingModule } from '@angular/router/testing';
import { AnaliseContasTitularComponent } from './analise-contas-titular.component';

import { ExtratosMensaisInternoService } from '../extratos-mensais-interno.service';

describe('AnaliseContasTitularComponent', () => {
  let component: AnaliseContasTitularComponent;
  let fixture: ComponentFixture<AnaliseContasTitularComponent>;
  // create a mock, where the first string 'serv' is what you want the mock to be named.
  // and the array of strings are the public methods you would like to mock
  let mockExtratosMensaisInternoService = jasmine.createSpyObj('serv', ['getCompetenciaSelecionada', 'getExtratoMensal']);

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule, HttpClientTestingModule ],
      declarations: [ AnaliseContasTitularComponent ],
      providers: [ MatDialog, Overlay, MatSnackBar,
        { provide: InjectionToken, useValue: {} },
        { provide: MAT_DIALOG_SCROLL_STRATEGY, useValue: {} },
      // now that we are providing a mock for ExtratosMensaisInternoService, I think you can get rid of HTTPClientTestingModule import.
       { provide: ExtratosMensaisInternoService, useValue: mockExtratosMensaisInternoService },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AnaliseContasTitularComponent);
    component = fixture.componentInstance;
    mockExtratosMensaisInternoService.getCompetenciaSelecionada.and.returnValue([0, 1, 2, 3, 4, 5, 6, 7]); // you can mock the array to what you need, I assume you need at least 8 elements because of the 7.
    mockExtratosMensaisInternoService.getExtratoMensal.and.returnValue(of({ data: 'hello world' }));
    // mock the data to be whatever you would like.
    fixture.detectChanges();
  });
  

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

Angular Testing - TypeError: Cannot read property '7' of undefined

Angular Testing - TypeError: Cannot read property '7' of undefined

testing

mocking

session-storage

jasmine

angular