Sign in
Skip to solution
mediumFrontend

Explain how to perform unit testing on components with Signals using TestBed.

1.1k views
01

Understand the problem

Describe testing strategies for signal-based components.

testingsignals
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

To test signal components, interact with signals using .set() or .update() inside test specs, then call fixture.detectChanges() to propagate changes. When testing effect(), you may need TestBed.flushEffects() or fixture.whenStable() to wait for asynchronous runs.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Unit test for a signal-based calculator component
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { signal, Component, computed } from '@angular/core';

@Component({
  selector: 'app-calc',
  template: '<span id="total">{{ total() }}</span>'
})
class CalcComponent {
  x = signal(10);
  y = signal(20);
  total = computed(() => this.x() + this.y());
}

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

  beforeEach(() => {
    fixture = TestBed.createComponent(CalcComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should calculate computed totals reactively', () => {
    expect(component.total()).toBe(30);

    component.x.set(100);
    fixture.detectChanges();

    const text = fixture.nativeElement.querySelector('#total').textContent;
    expect(text).toBe('120');
  });
});
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 16 of 121 decoded in the Angular track. One more won't hurt.

Back to track