testing-angular
Angular 21+ testing patterns with Vitest, signal component testing, and Playwright E2E. Use for writing unit tests, integration tests, or E2E tests for Angular applications. Use when this capability is needed.
来源信息
- 仓库
- tomevault-io/skills-registry
- 最近来源活动
- 2026年4月28日 22:53
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- testing-angular
- description
- Angular 21+ testing patterns with Vitest, signal component testing, and Playwright E2E. Use for writing unit tests, integration tests, or E2E tests for Angular applications. Use when this capability is needed.
- metadata
- {"author":"ai-enhanced-engineer"}
# Angular Testing Patterns
Testing fundamentals for Angular 21+ applications with Vitest (Karma is deprecated).
## Testing Stack (Angular 21+)
| Tool | Purpose | Status |
|------|---------|--------|
| **Vitest** | Unit/integration tests | Default in v21 |
| **Jasmine** | Test syntax | Still supported |
| **Playwright** | E2E testing | Recommended |
| **Testing Library** | Component queries | Optional |
## Quick Setup
```bash
# New project (Vitest is default)
ng new my-app
# Migrate existing project from Karma
ng generate @angular/core:migrate-to-vitest
```
## Signal Component Testing
```typescript
import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';
describe('CounterComponent', () => {
it('should update signal and computed values', async () => {
const fixture = TestBed.createComponent(CounterComponent);
const component = fixture.componentInstance;
// Initial state
expect(component.count()).toBe(0);
expect(component.doubled()).toBe(0);
// Update signal
component.count.set(5);
// CRITICAL: Flush effects for signal updates
TestBed.flushEffects();
expect(component.count()).toBe(5);
expect(component.doubled()).toBe(10);
});
});
```
## Key Testing APIs
| API | Purpose |
|-----|---------|
| `TestBed.flushEffects()` | Flush signal effects (NEW in v21) |
| `fixture.detectChanges()` | Trigger change detection |
| `fixture.whenStable()` | Wait for async operations |
| `fakeAsync() / tick()` | Control time in tests |
## Test File Naming
```
component.spec.ts # Unit tests
component.test.ts # Alternative (Vitest style)
component.e2e.ts # E2E tests (Playwright)
```
## When to Use Each Test Type
| Scenario | Test Type | Tool |
|----------|-----------|------|
| Signal logic | Unit | Vitest |
| Component rendering | Integration | Vitest + TestBed |
| User interactions | Integration | Vitest + Testing Library |
| Full user flows | E2E | Playwright |
| Visual regression | E2E | Playwright screenshots |
See `reference.md` for detailed patterns and `examples.md` for complete test suites.
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ai-enhanced-engineer) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->
在 GitHub 查看