Hacktoberfest 2026:維護者為十月標記出來的 issue,仍然開放、適合新手。 瀏覽 Hacktoberfest issue

V8 Coverage showing unexpected results

未關閉
#32,836 11 則留言 7 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
4/5
預估耗時
3-5 天
新手友好度
45/100
Issue 類型
缺陷
描述清晰度
基本清楚
活躍度
冷清
技術堆疊
angular, typescript

研究方向

先使用 ng test --coverage 在 Angular 21 中重現,然後結合對 app.tsapp.spec.ts 的變更,檢查 angular.jsonvitest.config.ts。將空元件的 V8 分支報告與已設定的 coverage include 和 exclude 進行比較。完成的標準是確定該結果屬於預期的 V8 行為,還是 Angular CLI unit-test builder 中的缺陷,並記錄可重現的案例和預期的 coverage 行為。

由索引模型根據 Issue 內容生成。

描述

angular/build:unit-test area: @angular/build gemini-triaged
Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I'm in the process of migrating from jasmine/karma with istanbul coverage to vitest with v8 coverage. I'm currently migrating around 2500 unit tests. With Istanbul I had over 95% coverage across statements, branches, functions and lines. With vitest I'm seeing lower coverage, mainly on the branches with 90%.

I've noticed that even empty classes (template only) show 90% branch coverage (9/10).

A minimal reproduction:

  • Create a new Angular 21 application: ng new ng21
  • Install v8 coverage npm i --save-dev @vitest/coverage-v8
  • Remove the protected title variable from app.ts -- protected readonly title = signal('ng21');
  • Remove the should render title test from app.spec.ts
  • Run ng test --coverage

This is the coverage I see:
Image

Similar from my project:
Image

with the spec file as:

import { TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
import { HeaderComponent as ClsHeaderComponent, TenantDropdownComponent } from '@cls/ui-util';
import { MockComponent } from '@cls/ui-util/testing';
import { SearchComponent } from '../../schedule/components/search/search.component';

describe('HeaderComponent', () => {
    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [HeaderComponent],
            providers: []
        })
            .overrideComponent(HeaderComponent, {
                remove: { imports: [SearchComponent, ClsHeaderComponent, TenantDropdownComponent] },
                add: {
                    imports: [
                        MockComponent({ selector: 'app-search' }) as any,
                        MockComponent({ selector: 'cls-header' }) as any,
                        MockComponent({ selector: 'cls-tenant-dropdown' }) as any
                    ]
                }
            })
            .compileComponents();
    });

    function setup() {
        const fixture = TestBed.createComponent(HeaderComponent);

        return {
            fixture,
            app: fixture.componentInstance,
            compiled: fixture.debugElement.nativeElement
        };
    }

    it('should create the app', () => {
        const { app } = setup();
        expect(app).toBeTruthy();
    });
});

angular.json

"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "browsers": ["chromium"],
    "buildTarget": "admin-ui:build",
    "headless": true,
    "tsConfig": "./tsconfig.spec.json",
    "runnerConfig": "./vitest.config.ts",
    "coverage": true,
    "coverageInclude": ["src/app/**/*.ts"],
    "coverageExclude": ["index.ts", "main.ts", "polyfills.ts", "**/*.routes.ts", "**/*.model.ts", "**/*.interface.ts"],
    "coverageReporters": ["text", "html", "lcov"],
    "coverageThresholds": {
      "statements": 90,
      "branches": 90,
      "functions": 90,
      "lines": 90
    }
  }
}

vitest.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({
    test: {
        environment: 'jsdom',
        globals: true,
        setupFiles: ['src/test-setup.ts'],
        restoreMocks: true,
        coverage: {
            provider: 'v8'
        },
        browser: {
            screenshotFailures: false
        }
    }
});

Have I misconfigured something? Do I have an incorrect assumption of v8 coverage or is there an issue here?

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.3
Angular           : 21.2.5
Node.js           : 22.13.1
Package Manager   : npm 10.9.2
Operating System  : darwin arm64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations               │ 21.2.5            │ ~21.2.0           │
│ @angular/build                    │ 21.2.3            │ ^21.2.0           │
│ @angular/cdk                      │ 21.2.3            │ ~21.2.0           │
│ @angular/cli                      │ 21.2.3            │ ~21.2.0           │
│ @angular/common                   │ 21.2.5            │ ~21.2.0           │
│ @angular/compiler                 │ 21.2.5            │ ~21.2.0           │
│ @angular/compiler-cli             │ 21.2.5            │ ~21.2.0           │
│ @angular/core                     │ 21.2.5            │ ~21.2.0           │
│ @angular/forms                    │ 21.2.5            │ ~21.2.0           │
│ @angular/language-service         │ 21.2.5            │ ~21.2.0           │
│ @angular/platform-browser         │ 21.2.5            │ ~21.2.0           │
│ @angular/platform-browser-dynamic │ 21.2.5            │ ~21.2.0           │
│ @angular/router                   │ 21.2.5            │ ~21.2.0           │
│ rxjs                              │ 7.8.2             │ ~7.8.2            │
│ typescript                        │ 5.9.3             │ ~5.9.3            │
│ vitest                            │ 4.1.0             │ ^4.0.18           │
│ zone.js                           │ 0.15.1            │ ~0.15.0           │
└───────────────────────────────────┴───────────────────┴──────────────────
Anything else?

No response

主要語言
TypeScript
星號
27k
分支
11.8k
平均合併
17 小時 21 分鐘
30 天內合併 PR
181

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。