Angular测试 - 在Karma上得到 "TypeError: 无法读取属性'textContent'的null"。

Question

我正在我的Angular应用程序上设置几个测试，在其中一个测试中，当我试图获取一个HTML元素时，我得到了这个错误。TypeError: Cannot read property 'textContent' of null

这是我模板的一个样本。

<div *ngIf="parentProps" class="detalhes-container">
  <!-- <p class="teste">teste</p> -->
  <div *ngFor="let info of parentProps.applicationsData; let i = index; trackBy: trackByFn">
    <p class="teste">teste</p>
  </div>
</div>

有两个... p 为了测试，第一个标签被注释了（工作正常），第二个是我想让它工作的标签。

spec.ts脚本。

describe('ListDetailsComponent', () => {
  let component: ListDetailsComponent;
  let fixture: ComponentFixture<ListDetailsComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ ListDetailsComponent ]
    })
    .compileComponents();
  })

  beforeEach(() => {
    fixture = TestBed.createComponent(ListDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('functions', () => {
    component.parentProps = true
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement
    expect(compiled.querySelector('.teste').textContent).toContain('teste');
  })

});

我之所以有两个 p 标签，因为我意识到其中一个问题是由于 parentProps 的属性。*ngIf所以我把它设置为 true 在我的测试中，然后它的工作，然而，在这之后，这 *ngIf 我也有一个区块与一个 *ngFor 当我在这个循环中使用标签运行测试时，我得到了同样的错误，所以，我认为问题出在了 *ngFor. 随着 *ngIf 我设法扭转了这个局面，但我不知道如何解决这个问题 *ngFor 的问题。

有一件事可能很重要，那就是 parentProps 确实是一个来自父组件的对象，我通过一个 @Input.

我如何解决这个问题？

Answer 1

你必须使 applicationsData 对象上的一个数组，对象不能只为真。

试试吧

it('functions', () => {
    component.parentProps = { applicationsData: ['hello', 'world'] }; // mock applicationsData array.
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement
    expect(compiled.querySelector('.teste').textContent).toContain('teste');
  })