Question

我是Angular Testing的新手，我正在尝试使此测试有效，但找不到解决此问题的方法。如果有人有任何想法，请。

TypeError：无法读取未定义的属性“ 7” 在在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'));
  }

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

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

谢谢

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

角度测试-TypeError：无法读取未定义的属性“ 7”

1 个答案: