How would you diagnose and optimize slow Angular component tests?

WHAT THIS TESTS: This question probes whether you understand the full stack of Angular test execution, not just generic testing wisdom. The interviewer wants to see that you know the difference between browser-based and Node-based runners, that you understand TestBed compilation cost, and that you can reason about module scope and mocking strategy in a large codebase.

A GOOD ANSWER COVERS: First, diagnosis. You would use Vitest's built-in reporters and duration flags to identify the slowest files and tests. If the project is still on Karma, you immediately note that migrating to Vitest with jsdom removes browser launch overhead, and swapping jsdom for happy-dom can cut DOM emulation time by roughly twenty to thirty percent. Second, reduce TestBed overhead. Instead of importing entire feature modules, import only the declarations your component needs, or use TestBed.overrideComponent to shallow-render. Third, global setup. Use angular.json's setupFiles and providersFile to configure universal mocks and providers once rather than per spec, preventing repeated module recompilation. Fourth, mock aggressively. Replace real HttpClient, services with heavy constructors, and third-party libraries with stubs so tests exercise the component, not the dependency graph.

COMMON WRONG ANSWERS: A major red flag is suggesting to stay on Karma because "it is more realistic" without acknowledging the browser startup penalty. Another is recommending NO_ERRORS_SCHEMA as a primary speed fix; it masks missing declarations but does not reduce compilation cost. Proposing to disable change detection globally is also suspect because it breaks test validity. Finally, vague advice like "just use less data" or "run tests in parallel" without mentioning Vitest's threading model or angular.json configuration shows shallow familiarity.

LIKELY FOLLOW-UPS: The interviewer may ask how you would test a component that relies on browser APIs unavailable in jsdom, such as Canvas or WebGL, which forces a discussion of the browsers array in angular.json. They might also ask about the trade-offs between shallow testing with stubs versus integration-style component tests, or how you would split a monolithic test suite using include and exclude glob patterns to parallelize across CI workers.

ONE CONCRETE EXAMPLE: Imagine a suite of two hundred component specs that each import a SharedModule containing fifty declarations and providers. Every TestBed.configureTestingModule call recompiles the entire shared surface, pushing suite duration past five minutes. You refactor the test setup to import only the specific components and stubs required, move global providers into a providersFile referenced in angular.json, and switch the runner from Karma to Vitest with happy-dom. The result is a drop to under sixty seconds with identical coverage.

Source: angular.dev