detectChanges() not working in Angular standalone component test

I have written a component test for a simple component which only displays an input field for a property name.

In the component test I'm setting the component's input property name to 'Stephan' and I'm expecting my name to appear in the input field, but it doesn't. In the test I have wrapped my component in a host component (as suggested in multiple tutorials and similar questions on Stack Overflow).

I tried various combinations of detectChanges()/whenStable() calls, but none of them worked.

name.component.html

<input id="name" [(ngModel)]="name" />


name.component.ts

import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'name',
templateUrl: './name.component.html',
standalone: true,
imports: [FormsModule],
})
export class NameComponent {
@Input() name: string = '';
}


name.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NameComponent } from './name.component';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';

describe('NameComponent', () => {
@Component({
imports: [NameComponent],
standalone: true,
template: `<name [name]="name"></name>`,
})
class TestHostComponent {
name: string = '';
}

let hostComponent: TestHostComponent;
let hostFixture: ComponentFixture<TestHostComponent>;

beforeEach(async () => {
hostFixture = TestBed.createComponent(TestHostComponent);
hostComponent = hostFixture.componentInstance;
hostFixture.detectChanges();
});

it('should display my name', async () => {
hostComponent.name = 'Stephan';
hostFixture.detectChanges();

const input = hostFixture.debugElement.query(By.css('input[id="name"]'));
console.log(input.nativeElement);
expect(input.nativeElement.textContent).toEqual('Stephan');
});
});


You can try it on Stackblitz here: https://stackblitz.com/edit/stackbl...ile=src/name-component/name.component.spec.ts

Continue reading...