Test Angular Apps With Jasmine and Karma

Jasmine and Karma let you run Angular tests in a real browser and check whether components, services, and other code behave as expected. You’ll use Angular’s test runner to execute the specs, see failures, and rerun tests as you make changes; you’ll need a working Angular project and Node.js installed.

What You’ll Need

An Angular project created with the Angular CLI, or an existing project that uses the CLI test setup.
A supported Node.js version for your installed Angular version. Check Angular’s official compatibility table if you need to install or change Node.js.
A package manager used by the project, such as npm, and access to install the project’s dependencies.
A terminal and a browser. Karma typically launches a browser locally to run the tests.

Step-by-Step

Open the project and install its dependencies. In a terminal, change to the directory containing package.json. Run npm install if dependencies have not been installed. For an existing project, use its lockfile and the package manager the team already uses; for npm, npm ci installs from the lockfile in a clean, repeatable way.
Confirm the test setup. In a typical Angular CLI project, the test script in package.json runs ng test. The project’s development dependencies commonly include Jasmine, Karma, and Angular’s testing tools. Run npm test or npx ng test. The CLI compiles the tests, starts Karma, opens a configured browser, and reports the results in the terminal.
Find or create a spec file. Angular unit tests usually live beside the code they test and end in .spec.ts, for example src/app/example/example.component.spec.ts. The CLI generates a starter spec when you create many components or services. You can also create a spec file manually, but ensure the project’s test configuration includes it.
Write a basic Jasmine test. Jasmine organizes tests with describe blocks and individual it cases. For example, a simple spec could be:
describe('formatLabel', () => { it('adds a label prefix', () => { expect(formatLabel('Home')).toBe('Label: Home'); }); });
Import the function under test. Keep each case focused on one behavior, and use a clear description of the expected result.
Test an Angular component through its fixture. For a component, use Angular’s TestBed to configure the testing module, create a component fixture, and trigger change detection. A common pattern is TestBed.configureTestingModule({imports: [MyComponent]}) for a standalone component, then const fixture = TestBed.createComponent(MyComponent), fixture.detectChanges(), and an assertion against fixture.nativeElement. For a non-standalone component, declare it in the testing module instead. Follow the pattern generated by your project, since setup differs between Angular configurations.
Test services and dependencies deliberately. Configure providers in TestBed when a service depends on Angular features or other services. Use a small fake or spy when you want to isolate the behavior under test; Jasmine’s spyOn can replace a method and verify whether it was called. For asynchronous code, return or await a promise, or use the appropriate Angular testing utilities for observables and timers. Avoid relying on real network requests in unit tests.
Run the tests and read the result. Start npm test again after editing a spec. In the usual CLI setup, Karma watches files and reruns tests when they change. A passing suite reports successful specs; a failure identifies the spec and often includes an expected-versus-actual message and stack trace. Fix the cause in the test or application code, not just the assertion, then rerun.
Run tests without watch mode when needed. To get a one-time run suitable for automation, use the test options supported by your installed Angular CLI. A common command is npx ng test --watch=false; newer CLI setups may also support a different test runner or browser options. Check npx ng test --help and the project configuration rather than assuming flags are identical across versions.
Check the full suite before sharing changes. Run all tests, not only the spec you just edited, and review the terminal output for compilation errors as well as failed assertions. If the project uses continuous integration, use its documented test command and browser configuration so your local result matches the automated check.

Common Mistakes

Skipping change detection. Creating a component fixture does not always update its rendered view. Call fixture.detectChanges() before asserting on the DOM, and call it again after changes when appropriate.
Using the wrong TestBed configuration. Standalone components are typically listed in imports; non-standalone components are typically listed in declarations. Check the component definition and the generated specs.
Testing implementation details. Assertions tied to private fields or incidental markup can break during harmless refactors. Prefer observable outcomes, such as rendered text, emitted events, or a service’s public behavior.
Leaving asynchronous work unfinished. A test can pass too early or time out if it does not wait for a promise, observable, or timer. Use the project’s established asynchronous testing pattern and return or await the work.
Assuming every Angular project uses the same runner. Angular CLI defaults and project configurations can change. Inspect package.json and the test configuration before adding packages or copying commands from another project.

Tips

Keep each spec focused, and name tests for behavior rather than internal method names.
Use Jasmine matchers such as toBe for exact values and toEqual for matching object or array contents.
Use spies or fake providers to isolate a unit test from services it does not need to exercise.
When investigating a failure, run the suite and inspect the first relevant error; later failures may be consequences of the same setup problem.
Do not add Karma or Jasmine packages blindly. First confirm what the project already depends on and how its CLI is configured.

Troubleshooting

The test command is missing or ng is not recognized: Check that you are in the project directory, dependencies are installed, and the project has a test script or Angular CLI dependency. Use npx ng test to run the local CLI when available. If no test target exists, inspect the project configuration before choosing a test setup.

Karma cannot start a browser: Confirm that a compatible browser is installed and that the project’s Karma launcher is configured for it. In headless or continuous-integration environments, use the project’s documented headless-browser setup; a locally installed desktop browser may not be available there.

A spec fails during compilation: Read the TypeScript error first. Check imports, component standalone status, missing providers, and whether the spec uses APIs compatible with the project’s Angular version. Resolve compile errors before interpreting assertion results.

A test times out or hangs: Look for unfinished asynchronous work, a subscription that never completes, or a timer that the test does not control. Make the test wait for the intended result, clean up subscriptions where necessary, and avoid increasing the timeout until you understand why the work is slow.

The test passes locally but fails in automation: Compare Node.js versions, dependency installation, browser availability, and the exact test command. Differences in timing or reliance on shared state can also cause intermittent failures; make tests independent and control asynchronous behavior.

Frequently Asked Questions

What does Jasmine do in an Angular test?
Jasmine provides the test structure, assertions, and tools such as spies. It defines what behavior each spec checks.

What does Karma do?
Karma runs tests in configured browsers and reports their results. Angular CLI connects the test files and build process to the runner.

How do I run Angular unit tests?
From the project directory, run npm test if that script is configured, or npx ng test. Check the project’s scripts and CLI options for its exact setup.

Where should Angular spec files go?
They commonly sit beside the component, service, or other code they test, with a .spec.ts suffix. Follow the existing project convention.

Do I need to install Karma and Jasmine separately?
Not necessarily. Many CLI projects already include test dependencies. Check package.json and the project configuration before installing anything.

Can I run Angular tests without opening a browser window?
Often, yes. Configure a supported headless browser for the project and use its documented test command. The exact setup depends on the CLI version and environment.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →