Start by identifying the test runner and environment your Angular project actually uses. New Angular CLI projects use Vitest with jsdom by default, while existing projects may use Karma. For component failures, inspect the fixture, component instance, rendered DOM, and DebugElement tree; switch to a real browser when browser-specific behavior or browser debugging matters.
Identify the test runner and environment
Check the project’s Angular test target and existing test setup before following runner-specific debugging instructions. Angular’s testing overview says new Angular CLI projects use Vitest by default. That setup runs tests in Node.js and uses jsdom to simulate the DOM. Existing projects can still use the supported Karma runner, so do not assume a project has migrated just because Vitest is now the default for new projects.
As an Amazon Associate I earn from qualifying purchases.
The environment should match the failure you are investigating. A component-state or template assertion can often be debugged in the default Node.js setup. A test that relies on browser-specific APIs or rendering may need a real browser. Angular notes that the Node.js environment is faster for most unit tests, while browser mode can help with browser APIs and debugging.
Inspect the component test
For a component test, use Angular’s ComponentFixture to examine both the component and its rendered representation. The fixture exposes the component instance and its DOM element; its utilities also let you trigger change detection and wait for stability. The component testing guide describes the fixture and DebugElement, which can help you inspect the component tree and injector.
#1 Best Overall
- Component instance: Check whether the component’s state matches what the failing assertion expects.
- Rendered DOM: Inspect the fixture’s element to see what the template actually rendered.
- DebugElement: Use it to investigate the Angular component tree and injector when the DOM alone does not explain the failure.
- Stability and change detection: Use the fixture’s change-detection controls and
whenStable()where asynchronous work affects the assertion.
Check TestBed configuration order
Set up the testing module before creating the component. Angular’s component scenarios guide explains that calling createComponent() freezes the TestBed definition, so additional configuration afterward is too late.
- Configure
TestBedwith the declarations, providers, imports, or overrides the test needs. - Call
TestBed.createComponent()only after configuration is complete. - Use the returned fixture to inspect state and DOM, run change detection, or wait for stability as appropriate.
Decide whether to use a real browser
Use the existing Node.js and jsdom setup unless the test’s behavior calls for a browser or a real browser would make the failure easier to investigate. Angular’s overview gives Playwright and WebdriverIO as examples of browser providers, and its Karma guide documents configuring a browser through angular.json or the CLI.
Rank #2
- Stay with Node.js and jsdom for most unit tests that do not depend on browser-only behavior.
- Choose browser mode when the test depends on browser APIs, actual rendering, or browser-based debugging.
- Keep the runner in view: Browser configuration and debugging steps depend on whether the project uses Vitest or Karma.
Set breakpoints in Karma tests
Angular’s version 18 debugging guide documents a browser breakpoint workflow for Karma. It says to debug browser specs in the same way as an application. These steps apply to the Karma workflow; they should not be treated as verified instructions for current Vitest projects.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Reveal the Karma browser window used by the test run.
- Click DEBUG in the Karma window.
- Open the browser developer tools and select the Sources panel.
- Open the spec file, set a breakpoint at the relevant line, and refresh the page.
Angular’s current testing guidance identifies Vitest as the default for new CLI projects, but the cited breakpoint walkthrough is for Karma. The cited Angular pages do not establish an equivalent step-by-step browser breakpoint procedure for current Vitest projects; use guidance specific to the runner and browser provider configured in your project rather than transplanting Karma’s steps.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
