Angular单元测试不能读取null的属性

Question

我在我的页面上有一个滑动条开关和一个标签文本。我正在为此编写测试用例。但是我得到"无法读取null属性">

<div class="test" *ngIf="checked">
<div class="toggles">
<mat-slide-toggle [(ngModel)]="checked">Toggle1</mat-slide-toggle>
</div>
</div>

测试用例

it('load slide text', ()=> {
component.checked = true;
const togtext = fixture.debugElement.nativeElement.querySelector('mat-slide-toggle') as HTMLElement;
expect(togtext.nativeElement.innerText).toContain('Toggle1');
});

Answer 1

类型HTMLElement没有称为nativeElement的属性。您已经使用了元素，所以您可以使用属性innerText直接访问文本。

所以在你的情况下试试togtext.innerText。

Answer 2

querySelector会给你本地元素，你可以直接获得内部HTML，如果你在TestBed中导入了MatSlideToggleModule, FormsModule，那么你的测试应该可以工作了

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ParagraphComponent],
imports: [MatSlideToggleModule, FormsModule],
});
fixture = TestBed.createComponent(YourComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('load slide text', () => {
component.checked = true;
fixture.detectChanges();
const togtext = fixture.debugElement.nativeElement.querySelector('mat-slide-toggle');
expect(togtext.innerText).toContain('Toggle1');
});

Answer 3

我得到了修复，当我移动我的if条件beforeeach

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ParagraphComponent],
imports: [MatSlideToggleModule, FormsModule],
});
fixture = 
TestBed.createComponent(YourComponent);
component = fixture.componentInstance;
component.checked = true;
fixture.detectChanges();
});
it('load slide text', () => {
fixture.detectChanges();
const togtext = fixture.debugElement.nativeElement.querySelector('mat-slide-toggle');
expect(togtext.innerText).
toContain('Toggle1');
});