Angular test component mock does not override regular component

I am writing an unit test for my component AskComponent. I want to mock the embedded component EditComponent as described in https://angular.io/guide/testing-components-scenarios#component-with-a-dependency test-scipt:

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

import {AskComponent} from './ask.component';
import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
import {HttpClient} from "@angular/common/http";
import {Component} from "@angular/core";

@Component({standalone: true, selector: 'stt-edit', template: ''})
class EditStubComponent {
constructor() {
console.log('edit stub new');
}
}

describe('AskComponent', () => {
let httpClient: HttpClient;
let httpTestingController: HttpTestingController;
let askComponent: AskComponent;
let fixture: ComponentFixture<AskComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EditStubComponent, AskComponent, HttpClientTestingModule]
})
.compileComponents();
httpClient = TestBed.inject(HttpClient);
httpTestingController = TestBed.inject(HttpTestingController);
fixture = TestBed.createComponent(AskComponent);
askComponent = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(askComponent).toBeTruthy();
});
});


EditComponent:

\\import ...
@Component({
selector: 'stt-edit',
standalone: true,
imports: [ ... ],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => EditComponent),
multi: true
}
],
templateUrl: './edit.component.html',
styleUrl: './edit.component.css'
})
export class EditComponent implements ControlValueAccessor {
constructor() {
console.log('edit new');
}
// ...
}


when I run the test, the mock component is not used, as I can see by the 'edit new' console output. Only if I change the 'stt-edit' selector in EditComponent to something like 'stt-edit2', EditStubComponent is injected. What am I doing wrong?

Continue reading...