angular-testing

Guides writing and reviewing Angular tests with TestBed, harnesses, and runner-specific practices.

1|Updated Jun 2, 2026
One-click install
npx skills add https://github.com/envoydev/claude-stack --skill angular-testing-envoydev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-testing
Source: https://github.com/envoydev/claude-stack/tree/main/stack/skills/angular-testing
Command: npx skills add https://github.com/envoydev/claude-stack --skill angular-testing-envoydev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Angular test suites often pass while the real application is broken, because TestBed provides its own environment and masks bootstrap or provider errors. This Skill provides house conventions for writing Angular tests that assert observable behavior, route to the correct test runner, and avoid false-confidence patterns. ## Core Features & Use Cases - Runner routing: Detects whether the workspace uses Karma/Jasmine, Jest, or Vitest from angular.json or package.json, and applies the matching mocking and timing APIs without mixing them. - Strategy by role: Covers components, services with HttpTestingController, signal stores, pipes, directives, guards, signals, and routed components via RouterTestingHarness. - Suite auditing: Ships a references/suite-audit.md catalog of false-confidence anti-patterns (assertion-free, tautological, missing-await, swallowed-exception) plus StrykerJS mutation testing guidance. - Use Case: When adding a spec for a bug fix in a standalone OnPush component, load this Skill to wire inputs through componentRef.setInput, drive change detection explicitly, and name the spec for the defect it pins. ## Quick Start Load the angular-testing skill before writing or reviewing tests for my Angular standalone components and services.

Frequently Asked Questions about angular-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Angular standalone components with TestBed?▼

Configure TestBed with imports: [TheComponent] and override providers for its injected services. Drive the DOM through the fixture, poke inputs and events, and assert rendered output and emitted events rather than private fields.

Karma vs Jest vs Vitest for Angular testing?▼

Use whichever runner the workspace already runs, detected from angular.json or package.json, and never migrate mid-task. For a new workspace with no runner, reach for Vitest since Karma is deprecated and Vitest is the CLI default via @angular/build:unit-test.

Does fakeAsync work with the Vitest runner in Angular?▼

No, the fakeAsync family cannot be used under the Vitest runner per Angular's docs. Use vi.useFakeTimers() with vi.advanceTimersByTime() instead; fakeAsync plus tick() works under Karma or Jest with Zone.js.

Why do my Angular tests pass while the app fails to boot?▼

TestBed provides its own environment, so a missing provider like provideHttpClient() in app.config.ts stays hidden. Keep one smoke spec that builds the app from the real appConfig providers so a missing production provider fails a spec.

How do I test routed Angular components without mocking Router?▼

Use provideRouter(routes) in the TestBed, create a RouterTestingHarness, and navigateByUrl to the route, asserting on harness.routeNativeElement. Mocking Router or ActivatedRoute stays green while the real route table or guard is broken.

What is mutation testing with StrykerJS for Angular?▼

StrykerJS mutates production code, such as flipping > to >=, and reruns the tests; surviving mutants reveal blind spots that line coverage hides. Scope it to critical modules and keep it off the fast PR path since it is expensive.