How to use Karma in Angular tests
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Karma is Angular’s default test runner that executes Jasmine tests in real browsers, providing accurate results for browser-specific behavior. With over 12 years of Angular development experience since 2014 and as the creator of CoreUI, I’ve configured Karma for countless testing environments. Karma launches browsers, runs tests, and reports results while watching files for changes during development. The configuration allows running tests in multiple browsers simultaneously and generating code coverage reports.
Use Karma test runner to execute Angular tests in browsers with live reload and coverage reporting.
Default Karma configuration (karma.conf.js):
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false,
jasmine: {
random: false,
seed: 42,
stopSpecOnExpectationFailure: false
}
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' },
{ type: 'lcovonly' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
})
}
Run tests:
# Run tests with Karma
ng test
# Run tests once (CI mode)
ng test --watch=false
# Run with code coverage
ng test --code-coverage
# Run in headless Chrome (CI)
ng test --browsers=ChromeHeadless --watch=false
# Run specific test file
ng test --include='**/user.service.spec.ts'
Configure for headless testing (CI/CD):
// karma.conf.js
module.exports = function(config) {
config.set({
// ... other config
browsers: ['ChromeHeadless'],
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox',
'--disable-gpu',
'--disable-dev-shm-usage'
]
}
},
singleRun: true
})
}
Add to package.json:
{
"scripts": {
"test": "ng test",
"test:ci": "ng test --watch=false --browsers=ChromeHeadlessCI --code-coverage",
"test:coverage": "ng test --code-coverage --watch=false"
}
}
Configure multiple browsers:
browsers: ['Chrome', 'Firefox', 'Safari'],
Debug tests in browser:
When Karma runs, click “DEBUG” button in browser window to debug with DevTools.
Best Practice Note
Karma runs tests in real browsers, ensuring compatibility unlike jsdom-based runners. Use ChromeHeadless for CI/CD to avoid GUI overhead. The autoWatch option reruns tests when files change during development. Coverage reports show which code is tested and which needs more tests. Use singleRun: true for CI environments to exit after running tests once. Karma can run tests in parallel across multiple browsers for cross-browser testing. This is the testing infrastructure we use for CoreUI Angular—Karma with Chrome for development and ChromeHeadless for automated CI/CD pipelines.
