[Solved] In this test code, why does fixture.debugElement.query(By.... In this test code, why does fixture.debugElement.query(By.css('input')) return null?const fixture = TestBed.createComponent(MyComponent); | Angular

Angular - Testing

In this test code, why does fixture.debugElement.query(By.css('input')) return null?

const fixture = TestBed.createComponent(MyComponent);
// Missing fixture.detectChanges()
const input = fixture.debugElement.query(By.css('input'));

ABecause query() requires a nativeElement, not DebugElement

BBecause the input element does not exist in the component template

CBecause detectChanges() was not called, the template is not rendered yet

DBecause By.css('input') is an invalid selector

Step-by-Step Solution

Solution:

Step 1: Effect of missing detectChanges()
Without detectChanges(), Angular does not render the template, so no elements exist in debugElement.
Step 2: Query returns null
Querying for 'input' returns null because the element is not present in the unrendered template.
Final Answer:
Because detectChanges() was not called, the template is not rendered yet -> Option C
Quick Check:
Missing detectChanges() means no elements found [OK]

Quick Trick: Always call detectChanges() before querying elements [OK]

Common Mistakes:

Master "Testing" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

In this test code, why does fixture.debugElement.query(By.css('input')) return null?