无法读取 null + "angular" 的属性 'length'？

Question

我正在尝试计算初始 li 和从服务器获取数据后（使用单元测试用例），但我得到 无法读取属性 'length'为空

我的代码：

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

      });
    });
  })
});

代码link

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

Answer 1

query 没有 return 数组，尝试使用 queryAll 来 return 数组而不是 query 这是解决方案：

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 方法 returns DebugElement

和方法DebugElement.queryAll方法returns DebugElement[]

所以DebugElement.queryAll将return一个DebugElement

的数组

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

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

无法读取 null + "angular" 的属性 'length'？

Cannot read property 'length' of null + "angular"?

javascript

angular

angular-test

无法读取 null + "angular" 的 属性 'length'？

Cannot read property 'length' of null + "angular"?

javascript

angular

angular-test

无法读取 null + "angular" 的属性 'length'？