iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Karma and Jasmine remain supported for Angular projects, but new Angular CLI projects currently use Vitest by default. Choose Karma when you are maintaining an existing Karma suite, need its browser-based workflow, or have a specific compatibility reason—not because it is the default for new projects.
When to use Karma and Jasmine in Angular
Karma launches tests in a browser; Jasmine provides the test framework and familiar functions such as describe and it. Angular’s current testing guide documents setup for both new and existing projects and describes Karma as supported. By contrast, Angular’s testing overview identifies Vitest as the default for new CLI projects. The overview describes Vitest’s default Node.js and jsdom setup as avoiding the need to launch a browser; Karma’s workflow launches one.
For a new project, select Karma explicitly if it fits your needs. For an existing project, weigh browser execution, compatibility with current tests and configuration, CI setup, and the work involved in changing runners. Angular’s migration guide characterizes migration from Karma/Jasmine to Vitest as experimental and says it requires the application build system; it does not establish that every Karma project should migrate.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchCreate or configure a Karma project
Scaffold a new project
Angular documents this command to create a project configured for Karma and Jasmine:
#1 Best Overall
ng new my-karma-app --test-runner=karmaAdd Karma to an existing project
Install the development dependencies listed in Angular’s guide using your package manager:
karmakarma-chrome-launcherkarma-coveragekarma-jasminekarma-jasmine-html-reporterjasmine-core@types/jasmine
Then configure the Angular workspace test target in angular.json to use the Karma runner. In tsconfig.spec.json, include jasmine in the types array so TypeScript recognizes Jasmine globals such as describe and it. The Angular CLI assembles Karma’s configuration from workspace options. If you need custom Karma settings, generate a configuration file with:
ng generate config karmaRun tests locally and in CI
Watch tests during development
Run ng test to build in watch mode and launch Karma. In the documented Karma workflow, results appear in the browser through the Jasmine HTML reporter, and a source change triggers another run.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRun a single headless pass in CI
Angular’s Karma guide gives this example command for a non-interactive run:
Rank #3
ng test --no-watch --no-progress --browsers=ChromeHeadless--no-watch makes the run single-pass rather than waiting for file changes, and --no-progress suppresses progress output. ChromeHeadless requests Chrome without a visible window. Make sure the browser and runner configuration are available in the CI environment; the command alone does not install or configure them.
Debug a failing browser test
- Make the Karma browser visible, then select DEBUG to open a test tab.
- Open the test file in the browser’s developer tools and set a breakpoint.
- Refresh the test tab to run the tests again and stop at the breakpoint.
Configure coverage thresholds
Angular’s Karma guide shows coverage output configured in karma.conf.js and a check threshold for statements, branches, functions, and lines. Its example sets each threshold to 80 percent. Treat those figures as example configuration values, not a required target or a universal coverage standard. Set thresholds that reflect the project’s policy.
Use Angular testing utilities with Jasmine
Jasmine describes individual tests, but Angular components often also need Angular’s testing environment. TestBed configures that environment, while ComponentFixture gives a test access to a component instance and its rendered view. These Angular concepts are useful regardless of the particular Jasmine syntax in a test. Angular’s testing utility API documentation notes that it is being updated for Vitest and that some explanations and examples remain in a Karma/Jasmine context.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →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.
