Skip to content

TestBed.overrideComponent breaks module imports #68363

@m-yst-ery

Description

@m-yst-ery

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

Trying to stub a single component with TestBed.overrideComponent seems to break imports of modules.
I think this is a regression and may have to do with the new vitest builder as I encountered this while migrating a project from jest to vitest. I.e. this used to work in the jest tests.

Or maybe I'm just doing something wrong / haven't fully understood how overrideComponent works, but it's at least unintuitive.

Reproduction

Plain, fresh generated Angular 21 project. No specific vitest configuration or similar.

// app.ts
import { Component, NgModule } from '@angular/core';

@Component({
  selector: 'test-component-1',
  template: '',
})
export class TestComponent1 {}

@NgModule({
  imports: [TestComponent1],
  exports: [TestComponent1],
})
export class TestModule1 {}

@Component({
  selector: 'test-component-2',
  template: '',
})
export class TestComponent2 {}

@Component({
  selector: 'app-root',
  imports: [TestModule1, TestComponent2],
  template: `
    <test-component-1></test-component-1>
    <test-component-2></test-component-2>
  `,
})
export class App {}
// app.spec.ts
import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { App, TestComponent2 } from './app';

@Component({
  selector: 'test-component-2',
  template: '',
  // avoid NG0912
  host: { 'some-binding': 'some-value' },
})
class TestComponent2Mock {}

describe('App', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
    })
      .overrideComponent(App, {
        remove: { imports: [TestComponent2] },
        add: { imports: [TestComponent2Mock] },
      })
      .compileComponents();
  });

  it('should create', () => {
    expect(TestBed.createComponent(App)).toBeTruthy();
  });
});

Running ng test on this project will result in the error

Error: NG0304: 'test-component-1' is not a known element (used in the '_App' component template):
1. If 'test-component-1' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'test-component-1' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

The same error occurs when doing

.overrideComponent(App, {
    set: { imports: [TestModule1, TestComponent2Mock] },
})

or even just

.overrideComponent(App, {})

This does not occur if App imports TestComponent1 directly instead of via the module.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw


Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI       : 21.2.8
Angular           : 21.2.10
Node.js           : 24.15.0
Package Manager   : npm 10.9.4
Operating System  : win32 x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.2.8            │ ^21.2.7           │
│ @angular/cli              │ 21.2.8            │ ^21.2.7           │
│ @angular/common           │ 21.2.10           │ ^21.2.0           │
│ @angular/compiler         │ 21.2.10           │ ^21.2.0           │
│ @angular/compiler-cli     │ 21.2.10           │ ^21.2.0           │
│ @angular/core             │ 21.2.10           │ ^21.2.0           │
│ @angular/forms            │ 21.2.10           │ ^21.2.0           │
│ @angular/platform-browser │ 21.2.10           │ ^21.2.0           │
│ @angular/router           │ 21.2.10           │ ^21.2.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.1.5             │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions