`TestBed.overrideComponent` breaks module imports with `@angular/build:unit-test`

Aperta
#33,064 6 commenti 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
angular, typescript

Direzione di ricerca

Inizia eseguendo la riproduzione in app.spec.ts con entrambe le configurazioni del runner @angular/build:unit-test in angular.json, quindi confrontala con @angular-devkit/build-angular:karma. Traccia il modo in cui TestBed.overrideComponent(App, {}) influisce sul TestModule importato e verifica la correzione con il test fornito in entrambi i runner; il test dovrebbe riconoscere test-component e creare App correttamente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

angular/build:unit-test area: @angular/build
Command

test

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

Reopening from https://github.com/angular/angular/issues/68363 as I don't feel it was fully answered and I later found the issue is related to the new builder.

When using the @angular/build:unit-test builder, TestBed.overrideComponent breaks imports out of modules. This happens for both vitest and karma runners, so I would assume it is connected to the build, not the test execution.

The issue does not occur when using other builder like @angular-devkit/build-angular:karma

Minimal Reproduction

Plain Angular project + packages needed for running karma

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

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

@NgModule({
  imports: [TestComponent],
  exports: [TestComponent],
})
export class TestModule {}

@Component({
  selector: 'app-root',
  imports: [TestModule],
  template: ` <test-component></test-component> `,
})
export class App {}

describe('App', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
    })
      .overrideComponent(App, {}) // <= problematic call
      .compileComponents();
  });

  it('should create', () => {
    expect(TestBed.createComponent(App)).toBeTruthy();
  });
});
// angular.json
...
// fails
"test-vitest": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "vitest"
  }
},
// fails
"test-karma": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "karma"
  }
},
// this one works
"test-karma-devkit": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "tsConfig": "./tsconfig.spec.json"
  }
}
...

Running the test with @angular/build:unit-test it fails for both runners with

Error: NG0304: 'test-component' is not a known element (used in the '_App' component template):
1. If 'test-component' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'test-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
 ❯ validateElementIsKnown ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element_validation.ts:116:14
 ❯ validateElementIsKnown ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element.ts:151:4
 ❯ initializeElement ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element.ts:127:2
 ❯ ɵɵelementStart ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/element.ts:218:2
 ❯ _App_Template ng:/_App.js:6:21
 ❯ templateFn ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/shared.ts:109:4
 ❯ executeTemplate ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:107:6
 ❯ renderView ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:47:4
 ❯ renderComponent ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:160:4
 ❯ renderChildComponents ../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/instructions/render.ts:140:6

With the @angular-devkit/build-angular:karma it passes as expected.

Also actually overriding something in TestBed.overrideComponent doesn't change the behaviour. I originally discovered this with a test that needs to stub a component. I left it out for simplicity here.

Exception or Error

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


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-devkit/build-angular │ 21.2.8            │ ^21.2.8           │
│ @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 relevant?

No response

Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
16h 21m
PR unite (30g)
170

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/angular-cli

Tutte le issue di angular/angular-cli

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.