Angular Unit Tests with effect()

angular-unit-testing-effect.ts

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

it('does not execute effects', () => {
  TestBed.runInInjectionContext(() => {
    let sum = 0;
    const numbers = signal([1, 2, 3]);
    effect(() => (sum = numbers().reduce((n1, n2) => n1 + n2)));

    expect(sum).toBe(6); // 0

    numbers.mutate((value) => value.push(4));
    expect(sum).toBe(10); // 0
  });
});

export const testEffects =
  (testFn: (runEffects: () => void) => void): (() => void) =>
  () => {
    const fixture = TestBed.configureTestingModule({
      imports: [TestComponent],
    }).createComponent(TestComponent);

    TestBed.runInInjectionContext(() => testFn(() => fixture.detectChanges()));
  };

@Component({
  template: '',
  standalone: true,
})
class TestComponent {}

it(
  'should execute effects',
  testEffects((runEffects) => {
    let sum = 0;
    const numbers = signal([1, 2, 3]);
    effect(() => (sum = numbers().reduce((n1, n2) => n1 + n2)));
    runEffects();

    expect(sum).toBe(6); // 6

    numbers.mutate((value) => value.push(4));
    runEffects();
    expect(sum).toBe(10); // 10
  })
);