Using overrideComponent breaks code coverage when testing with aot: true

Open
#30,127 9 comments 12 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
angular, typescript

Research direction

Reproduce the issue in the generated app using angular.json, app.spec.ts, TestBed.overrideComponent, and the provided ng test --no-watch --code-coverage commands. Compare coverage before and after the override, then trace the Angular CLI test and AOT coverage entry points. Done means the override no longer makes the component template coverage inaccurate.

Written by the indexing model from the issue text.

Description

area: @angular/build devkit/build-angular:karma freq1: low severity3: broken type: bug/fix
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

When using TestBed.overrideComponent to stub a child component, the test code coverage is no longer accurate

Minimal Reproduction

Generate a new app with latest CLI and add a component:

npx @angular/cli@20.0.0-next.6 new aot-coverage --defaults --no-routing
cd aot-coverage
ng g c user

Use app-user in app.html:

<h1>Hello, aot-coverage</h1>
<app-user></app-user>

Edit angular.json to add "aot": true in the test section and run:

ng test --no-watch --code-coverage

Coverage is 100%

Statements   : 100% ( 12/12 )
Branches     : 100% ( 11/11 )
Functions    : 100% ( 3/3 )
Lines        : 100% ( 6/6 )

Now, in the app.spec.ts, add in beforeEach:

TestBed.overrideComponent(App, {
  remove: {
    imports: [User],
  },
  add: {
    imports: [User],
  }
});

(this happens with a proper stub of course but even removing the import and adding it back works to reproduce the issue)

Run the tests again:

ng test --no-watch --code-coverage

Coverage is now inaccurate because the template is not properly covered:

Statements   : 58.33% ( 7/12 )
Branches     : 90.9% ( 10/11 )
Functions    : 66.66% ( 2/3 )
Lines        : 66.66% ( 4/6 )
Exception or Error

Your Environment
Angular CLI: 20.0.0-next.6
Node: 22.14.0
Package Manager: npm 10.9.0
OS: darwin arm64

Angular: 20.0.0-next.7
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.0-next.6
@angular-devkit/core         20.0.0-next.6
@angular-devkit/schematics   20.0.0-next.6
@angular/build               20.0.0-next.6
@angular/cli                 20.0.0-next.6
@schematics/angular          20.0.0-next.6
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.0
Anything else relevant?

No response

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.