angular / angular/angular-cli

Allow using `vi.mock` (and related) functions in tests

オープン
#32,641 コメント 4 件 リアクション 30 件 担当者 0 名 GitHub で見る
angular/build:unit-test area: @angular/build
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### Which @angular/* package(s) are relevant/related to the feature request?

core

### Description

With the new Angular unit-test builder (Vite), test files are bundled into unified chunks.
Because of this full bundling step:

- ESM modules are statically linked at build time
- There is no runtime module graph available
- vi.mock() cannot intercept module loading
- Mocking entire modules (components/services/modules) is not possible

Currently if we use `vi.mock` function for automocking component/directives/services/pipes/etc..., we got an error:

```
Error: The "vi.mock" and related methods are not supported with the Angular unit-test system. Please use Angular TestBed for mocking.
```

TestBed overrides are insufficient because:

- They replace Angular metadata (providers/imports), not module implementation
- They cannot replace pure TS logic or side effects
- They do not intercept ESM import bindings

### Proposed solution

Instead of runtime interception (like Vitest normally does), Angular test builder should:

1. Detect `vi.mock()` calls at compile time (in spec files, and in setupFiles)
2. Hoist them
3. Rewrite import bindings to use a generated mock registry
4. Replace module resolution during bundling

I suggest to create esbuild plugin, that:

1. Parse test file AST
2. Detect:
- `vi.mock()`
- `vi.unmock()`
- `vi.doMock()`
- `vi.doUnmock()`
- `vi.importMock()`
- `vi.importActual()`
- `vi.hoisted()`
3. Hoist mock calls
4. Rewrite imports

#### Example Transform Injectable

**Before**:
```typescript
import { MyService } from './my-service';
import { MyOtherService } from './my-other-service';

vi.mock('./my-service', () => ({
MyService:
@Injectable({providedIn: 'root'})
class {
get() { return 'mock'; }
}
}));

vi.mock('./my-other-service');

test(() => {
const myService = new MyService();
const myOtherService = new MyOtherService();
});
```

**After**:
```typescript
// should initialize once in one environment
const __angularViMocks = (globalThis.__angular_vi_mocks ??= new Map());

__angularViMocks.set(
'./my-service',
(() => ({
MyService: class {
get() { return 'mock'; }
static ɵprov = {
providedIn: 'root',
factory: () => new this();
};
static ɵfac = () => new this();
}
}))()
);

__angularViMocks.set(
'./my-other-service',
(() => ({
MyOtherService: class {
get = vi.fn(); // maybe better to put `vi.fn()` to MyOtherService.prototype.get = vi.fn();
static ɵprov = {
providedIn: 'root',
factory: () => new this();
};
static ɵfac = () => new this();
}
}))()
);

import * as __angularViActualMod1 from './my-service';
import * as __angularViActualMod2 from './my-other-service';

// We should replace that import in every dependent chunk.
const { MyService } = __angularViMocks.get('./my-service') ?? __angularViActualMod1;
const { MyOtherService } = __angularViMocks.get('./my-other-service') ?? __angularViActualMod2;
```

### Requirements:

- Must mock full implementation (not only metadata) for any modules, as `vi.mock()` does
- Must stub components, services, modules, pipes, directives both metadata and implementation
- Must preserve ESM live bindings semantics
- Must preserve sourcemaps and coverage
- Must not require runtime module loader

### Alternatives considered

Currently we have no choice, but stay with slow and inefficient `jest` + `jest-preset-angular`.

I've implemented deep-automocking infrastructure for `jest.mock()` [ng-automocks-jest](https://www.npmjs.com/package/ng-automocks-jest), it can stub any angular entities, both metadata and implementation.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

新しい Angular のユニットテストビルダーとその Vite バンドリングパスから始め、vi.mock 呼び出しが拒否される箇所と、spec ファイルおよび setupFiles がどのように変換されるかを追跡します。コンパイル時検出、ホイスティング、import の書き換え、モックレジストリについて提案されている要件を確認します。完了条件は、ESM のライブバインディング、sourcemap、カバレッジを維持し、ランタイムのモジュールローダーを使わずに、列挙された vi 関数をサポートすることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript, vite
領域
build-system, testing-qa
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
20/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。