Importing standalone component in TestBed not working

Question

I'm upgrading my app from Angular 17 to Angular 19 (19.0.6) and nx20. I encountered some problems with TestBed and standalone component.

I have the following code :

@Component({
  templateUrl: './connection.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: false
})
export class ConnectionComponent implements OnInit {...

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FakesModule, CoreTranslationTestingModule, MockComponent(FeatureConsentsComponent)],
      declarations: [
        ConnectionComponent,
        MockComponent(ButtonComponent),
        MockComponents(MotivationBlockComponent, MotivationBlockItemComponent)
      ],
      providers: [
        provideMockStore(),
        provideDummyTokens(),
      ]
    });
    fixture = TestBed.createComponent(ConnectionComponent);
    component = fixture.componentInstance;
  });

The FeatureConsentsComponent is a standalone component :

@Component({
    selector: 'consents',
    templateUrl: './consents.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgIf, CheckBoxModule, LayoutModule, NgFor, AsyncPipe, TranslateModule],
    providers: [ConsentsHttpService, addDynamicComponentProviders(ConsentsErrorsProvider)]
})

But I have the following error when I try to run the test file :

    Unexpected "MockOfFeatureConsentsComponent" found in the "declarations" array of the "TestBed.configureTestingModule" call, "MockOfFeatureConsentsComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?

If I force standalone: true on the FeatureConsentsComponent it works. Why ?

Answer 1

I suppose that you use the lib ng-mocks.

The problem that you describe is exactly the one of this issue: https://github.com/help-me-mom/ng-mocks/issues/10632

Upgrading ng-mocks to 14.13.2 should solve your problem