Angular Unit test Cannot read properties of null-CodePudding

I have a slider toggle in my page and also a label text. I am writing test cases for that. But Iam getting "cannot read properties of null"

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

test cases

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

CodePudding user response：

The type HTMLElement doesn't have a property called nativeElement. You are already working with the element so you can access the text directly using the property innerText.

So in your case try togtext.innerText.

CodePudding user response：

querySelector will give you the native element you can directly get the inner HTML, and if you import MatSlideToggleModule, FormsModule in your TestBed, then your test should work

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ParagraphComponent],
    imports: [MatSlideToggleModule, FormsModule],
  });
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;

  fixture.detectChanges();
});

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