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属性，因此我将其设置为{{1} }在我的测试中，然后成功了，但是，在此true之后，我还有一个带有*ngIf的代码块，当我在此循环中使用标记运行测试时，我得到了相同的错误，我相信问题是*ngFor。有了*ngFor，我设法解决了这个问题，但是我不知道如何解决*ngIf问题。

一件可能很重要的事情，*ngFor确实是我通过parentProps收到的来自父组件的对象。

我该如何解决？

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

角度测试-在Karma上获取“ TypeError：无法读取null的属性'textContent'”

1 个答案: