无法读取属性＆＃39;长度＆＃39; null +＆＃34; angular＆＃34;？

Question

我正在尝试计算初始li并从服务器获取数据后（使用单元测试用例），但我得到无法读取属性＆＃39;长度＆＃39;为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

Answer 1

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

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

Answer 2

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

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

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

因此DebugElement.queryAll将返回DebugElement

的数组

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

因此，您必须使用DebugElement.queryAll来测试结果数组的长度。