无法读取 null +“角度”的属性“长度”？答案

【问题标题】：Cannot read property 'length' of null + "angular"?无法读取 null +“角度”的属性“长度”？
【发布时间】：2018-04-15 16:26:31
【问题描述】：

我正在尝试计算初始 li 并在从服务器获取数据后（使用单元测试用例），但我得到 Cannot read property 'length' of null

我的代码：

import { ComponentFixture, TestBed, async, getTestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { MockAppService } from './mock.service'
import { DebugElement } from '@angular/core';

import { AppComponent } from './app.component';
import { AppService } from './app.service';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>,
    component: AppComponent,
    service: AppService,
    debugEl:DebugElement,
    el:HTMLElement;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [
        AppComponent
      ],

      providers: [{ provide: AppService, useClass: MockAppService }]

    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    service = TestBed.get(AppService);
     el = fixture.nativeElement;

    spyOn(service, 'getData').and.callThrough();

  }));

  afterEach(() => {
    //httpMock.verify();
  });

  describe('AppComponent onit test', () => {

        it('intial list item', async(() => {
                  debugEl = fixture.debugElement.query(By.css('li'));
      expect(fixture.nativeElement.querySelector('li').length()).toBe(0);
    }));
    it('should called appService getData method', async(() => {
      fixture.detectChanges();
      expect(service.getData).toHaveBeenCalled();
    }));
    it('should return an Observable<User[]>', () => {
      const dummyUsers = [{
        userId: 10,
        id: 10,
        title: "post",
        body: "post"
      }];

      service.getData().subscribe(users => {
        console.log(users)
        expect(users.length).toBe(1);
        expect(users).toEqual(dummyUsers);
         expect(fixture.nativeElement.querySelector('li').length()).toBe(1);

      });
    });
  })
});

代码链接

https://stackblitz.com/edit/angular-testing-w9towo?file=app%2Fapp.component.spec.ts

【问题讨论】：

抱歉，这个错误有什么不清楚的地方？你有一个空属性，你得到了它的长度。在你这样做之前确保它不为空。
在获取服务响应计数之前li长度和在接收响应之后li长度

标签： javascript angular angular-test

【解决方案1】：

查询不返回数组，尝试使用queryAll返回数组而不是查询这是解决方案：

it('intial list item', async(() => {
   let liCount= fixture.debugElement.queryAll(By.css('li'));
   expect(liCount.length).toBe(0);
}));

【讨论】：

收到错误fixture.debugElement.query.all is not a function
stackblitz.com/edit/…
我用解决方案更新了答案，它在这里对我有用:)

【解决方案2】：

当您查看此文档时：https://angular.io/api/core/DebugElement

你会发现DebugElement.query方法返回DebugElement

方法DebugElement.queryAll方法返回DebugElement[]

所以DebugElement.queryAll 将返回DebugElement 的数组

在这种情况下，由于它是一个数组，因此您可以对其应用 length 属性。

所以你必须使用DebugElement.queryAll 来测试结果数组的长度。

【讨论】：