How to Use Fixture in Angular Test: Simple Guide

In Angular tests, fixture is created by TestBed.createComponent() and provides access to the component instance and its rendered DOM. You use fixture.detectChanges() to update the view after changes. This lets you test component behavior and UI in a controlled environment.

Syntax

The fixture is created using TestBed.createComponent(ComponentClass). It has two main parts: fixture.componentInstance to access the component's TypeScript code, and fixture.nativeElement to access the rendered HTML. Use fixture.detectChanges() to apply data changes and update the view.

typescript

const fixture = TestBed.createComponent(MyComponent);
const component = fixture.componentInstance;
const element = fixture.nativeElement;
fixture.detectChanges();

Example

This example shows how to create a fixture for a simple component, update a property, trigger change detection, and check the rendered output.

typescript

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, {{name}}!</h1>`
})
class HelloComponent {
  name = 'World';
}

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

  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [HelloComponent] });
    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.componentInstance;
  });

  it('should display initial name', () => {
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toBe('Hello, World!');
  });

  it('should update name and reflect in DOM', () => {
    component.name = 'Angular';
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toBe('Hello, Angular!');
  });
});

Output

All tests pass with expected text content in <h1> element.

Common Pitfalls

• Not calling fixture.detectChanges() after changing component properties will not update the DOM.
• Accessing fixture.nativeElement before detectChanges() may show stale or empty content.
• For asynchronous tasks, use fixture.whenStable() before assertions.

typescript

/* Wrong: Missing detectChanges */
component.name = 'Test';
// No fixture.detectChanges();
expect(fixture.nativeElement.querySelector('h1')?.textContent).not.toBe('Hello, Test!');

/* Right: With detectChanges */
component.name = 'Test';
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('h1')?.textContent).toBe('Hello, Test!');

Quick Reference

Fixture Cheat Sheet:

• TestBed.createComponent(): creates the fixture
• fixture.componentInstance: access component class
• fixture.nativeElement: access rendered DOM
• fixture.detectChanges(): update view after changes
• fixture.whenStable(): wait for async tasks

Key Takeaways

Use TestBed.createComponent() to get the fixture for your component.

Always call fixture.detectChanges() after changing component data to update the DOM.

Access component logic via fixture.componentInstance and DOM via fixture.nativeElement.

For async operations, wait with fixture.whenStable() before checking results.

Avoid accessing DOM before detectChanges() to prevent stale content.