TypeError: Cannot read property 'length' of null on typescript spec file

Question

我正在 TypeError: Cannot read property 'length' of null 测试我的组件。如何解决这个问题？

这里是html:

<header-nav
    [eventList]="eventList$ | async"
    [eventListSize]="(eventList$ | async).length"
    (selectedEvent)="eventSelected($event)"
    (setLang)="langChanged($event)"
    [currentLang]="currentLang$ | async"
    [langList] = "langList$ | async"
    (leftNavi) = "leftNaviHandler($event)"
    >

这里是 ts 文件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store, select } from "@ngrx/store";
import { Observable } from "rxjs";
import { ModelEvent, EventState } from "./../../../calendar/models/model.event";
import { ModelLang, ModelLonguage } from "./../../../shared-components/models/models";
import { CalendarActions, Load, EventSelected } from "./../../../calendar/state/calendar.actions";
import * as fromRoot from  "./../../../calendar/state";
import * as fromObservables from  "./../../state";
import { Lang, LoadLang } from "./../../state/actions/shared.actions";
import { ShowNavi } from "./../../../shared-components/state/actions/shared.actions";

@Component({
    selector: 'header-nav-shell',
    templateUrl: './header-nav-shell.component.html',
    styleUrls: ['./header-nav-shell.component.scss']
})
export class HeaderNavShellComponent implements OnInit {
    /**
    * declartion of observable events
    */
    eventList$:Observable<ModelEvent[]>;
    eventListSize$:number;
    currentLang$:Observable<string>;
    langList$:Observable<ModelLonguage[]>;

    constructor(private store:Store<fromRoot.NewState>, private router:Router) { }

    ngOnInit() {
        this.store.dispatch(new Load());
        this.store.dispatch( new LoadLang());
        this.eventList$ = this.store.pipe(select(fromRoot.getEvents));
        this.currentLang$ = this.store.pipe(select(fromObservables.getCurrentLang));
        this.langList$ = this.store.pipe(select(fromObservables.getLangList));
    }

    eventSelected(event) {
        this.store.dispatch(new EventSelected(event));
        this.router.navigateByUrl("iboCalendar");
    }

    langChanged(event) {
        this.store.dispatch( new Lang(event.Name));
    }

    leftNaviHandler(event):void {
        this.store.dispatch(new ShowNavi(event));
    }

}

这是规范文件：

import { async, fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';

import { HeaderNavShellComponent } from './header-nav-shell.component';
import { HeaderComponent } from './../../header/header.component';
import { HeaderNavComponent } from './../../components/header-nav/header-nav.component';
import { StoreModule, Store  } from '@ngrx/store';
import { TranslateFakeLoader,TranslateLoader,TranslateModule,TranslateService, TranslateStore } from '@ngx-translate/core';
import { RouterTestingModule } from '@angular/router/testing';
import { reducerShared } from "./../../state/reducers/shared.reducer";
import { HttpClientModule, HttpClient } from '@angular/common/http';


describe('HeaderNavShellComponent', () => {

    let component: HeaderNavShellComponent;
    let fixture: ComponentFixture<HeaderNavShellComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ HeaderNavShellComponent, HeaderComponent, HeaderNavComponent ],
            imports:[
                HttpClientModule,
                StoreModule.forRoot({}),
                RouterTestingModule,
                TranslateModule.forChild({
                  loader: {
                        provide: TranslateLoader,
                        useClass: TranslateFakeLoader
                  }
                })
            ],
            providers:[TranslateService, TranslateStore, Store, HttpClient ]
        })
        .compileComponents();
    }));

     beforeEach(fakeAsync(() => {
        fixture = TestBed.createComponent(HeaderNavShellComponent);
        component = fixture.componentInstance;
        tick(1000);
        fixture.detectChanges();
    }));


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

});

错误：

  TypeError: Cannot read property 'length' of null
            at Object.eval [as updateDirectives] (ng:///DynamicTestModule/HeaderNavShellComponent.ngfactory.js:34:98)
            at Object.debugUpdateDirectives [as updateDirectives] (node_modules/@angular/core/fesm5/core.js:23813:1)
            at checkAndUpdateView (node_modules/@angular/core/fesm5/core.js:23209:1)
            at callViewAction (node_modules/@angular/core/fesm5/core.js:23450:1)
            at execComponentViewsAction (node_modules/@angular/core/fesm5/core.js:23392:1)
            at checkAndUpdateView (node_modules/@angular/core/fesm5/core.js:23215:1)
            at callWithDebugContext (node_modules/@angular/core/fesm5/core.js:24079:1)
            at Object.debugCheckAndUpdateView [as checkAndUpdateView] (node_modules/@angular/core/fesm5/core.js:23781:1)
            at ViewRef_.push.../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (node_modules/@angular/core/fesm5/core.js:21590:1)
            at ComponentFixture.push.../node_modules/@angular/core/fesm5/testing.js.ComponentFixture._tick (node_modules/@angular/core/fesm5/testing.js:227:1)

我在这里做错了什么？有人想知道我吗？ 我正在从异步值中获取长度。

提前致谢

Answer 1

尝试创建一个存根来处理 store 服务：

class StoreStub(val){
  if(val === fromRoot.getEvents){ 
   //event action will have values as you are passing "fromRoot.getEvents" in component
    return of({
       //expected object of events
    })
  }else if(val === fromObservables.getCurrentLang){ 
    //event action will have values as you are passing "fromObservables.getCurrentLang" in component
    return of({
       //expected object of events
    })
  }

 // and so on.....

}

然后使用useClass:

providers:[TranslateService, TranslateStore, {provide: Store, useClass: StoreStub}, HttpClient ]

Answer 2

我的情况和上面的问题很相似，唯一不同的是没有使用async，但是同样的错误

TypeError: Cannot read property 'length' of null
        at Object.eval [as updateDirectives] (ng:///DynamicTestModule/HeaderNavShellComponent.ngfactory.js:34:98)
        at Object.debugUpdateDirectives [as updateDirectives] (node_modules/@angular/core/fesm5/core.js:23813:1)

您会注意到堆栈跟踪无法显示实际问题所在。

实际问题是检查长度所需的理智

[someData]="someObj.list.length"

所以用这个改变上面的行

[someData]="someObj?.list?.length"

就是这样，事情开始起作用了。

为遇到类似问题的其他人发布此答案。

TypeError: Cannot read property 'length' of null on typescript spec file

TypeError: Cannot read property 'length' of null on typescript spec file

karma-jasmine

angular-test

angular7