Angular Unit Testing TestBed Jasmine is an important Angular topic because it appears in real projects, debugging sessions, and interviews. Learn the meaning first, then connect it to a small working example so the rule does not stay abstract.
For this page, focus on what problem Angular Unit Testing TestBed Jasmine solves, where developers usually make mistakes, and how to verify the result. The audit note for this lesson was: limited checklist/practice/mistake/FAQ notes .
A strong understanding of Angular Unit Testing TestBed Jasmine should include syntax, behavior, one realistic use case, one failure case, and one quick way to check your work with tools or output.
Angular Unit Testing TestBed Jasmine should be studied as a practical Angular lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
In the angular > unit-testing page, the notes should connect the definition with a working scenario, a mistake that beginners actually make, and the exact check that proves the fix. That makes the topic useful for coding, debugging, and interview revision.
In this section, we will cover step by step unit testing for Angular CLI applications. Unit testing is the process of testing the smallest testable units or components of an application in isolation. In Angular 21, Vitest is the default test runner for new projects, replacing Karma and Jasmine.
Unit Testing is very important for any applications, because:-
In Angular 21, Vitest is the default test runner for new projects. For existing projects, Jasmine and Karma are still supported. Various libraries and tools are available for testing such as Vitest, Jasmine, Karma, Mocha, and Jest.
Vitest:- The default test runner in Angular 21. It offers fast test execution, Jest-compatible syntax, and modern async/await support.
Jasmine:- An open source, behavior-driven development framework for writing Angular tests. Still supported in Angular 21 for existing projects.
Karma:- A test runner that executes JavaScript code in multiple real browsers. Replaced by Vitest as the default in Angular 21, but still supported for legacy projects.
When we create an Angular CLI application, the CLI sets up everything needed to test with the default test framework. When we create a component, directive, pipe, or service through the CLI, a spec.ts file is created automatically. Once the application is created, navigate to the root directory and run the below command to run the test suite.
The ng test command builds the application and launches the test runner. In Angular 21, this uses Vitest by default. The console output looks similar to below:
Also, ng test opens a browser window to display the success and failed test cases in the test reporter.
ng testDEV v1.x.x /my-angular-app
✓ src/app/app.component.spec.ts (3 tests) 12ms
✓ src/app/counter.service.spec.ts (2 tests) 5ms
Test Files 2 passed (2)
Tests 5 passed (5)
Start at 10:23:45
Duration 1.23sAn Angular CLI can run unit tests and create code coverage reports and this reports shows us the parts of our code base that may not be properly tested by our unit tests. To generate a code coverage report, just type below code in terminal.
Once the tests are complete, the above command creates a new "/coverage" folder in the root of application. Now, just open the index.html file to see the code coverage report with source code.
To create code coverage reports every time we test, just set the following option in the CLI configuration file, i.e. angular.json:-
ng test --no-watch --code-coverage"test": {
"options": {
"codeCoverage": true
}
}Vitest uses Jest-compatible syntax. Here is a complete example testing a service and a standalone component:
import { describe, it, expect, beforeEach } from 'vitest';
import { CounterService } from './counter.service';
describe('CounterService', () => {
let service: CounterService;
beforeEach(() => {
service = new CounterService();
});
it('should start at 0', () => {
expect(service.count()).toBe(0);
});
it('should increment', () => {
service.increment();
expect(service.count()).toBe(1);
});
it('should reset', () => {
service.increment();
service.reset();
expect(service.count()).toBe(0);
});
});import { describe, it, expect } from 'vitest';
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
it('should create the component', async () => {
await TestBed.configureTestingModule({
imports: [AppComponent]
}).compileComponents();
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it('should render title', async () => {
await TestBed.configureTestingModule({
imports: [AppComponent]
}).compileComponents();
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const el = fixture.nativeElement as HTMLElement;
expect(el.querySelector('h1')?.textContent).toContain('Angular');
});
});Angular 21 replaces Karma and Jasmine with Vitest as the default test runner for new projects. Vitest offers significantly faster test execution, modern APIs, and Jest-compatible syntax.
To create a new project with Vitest (default in Angular 21):
To migrate existing Jasmine tests to Vitest, use the migration schematic:
ng new my-projectng g @schematics/angular:refactor-jasmine-vitestconst state = { topic: "Angular Unit Testing TestBed Jasmine", ready: true };
if (state.ready) {
console.log(state.topic + ": render or run the normal path");
}const response = null;
const message = response?.message ?? "Angular Unit Testing TestBed Jasmine: show a clear fallback";
console.log(message);Memorizing Angular Unit Testing TestBed Jasmine without the situation where it is useful.
Connect Angular Unit Testing TestBed Jasmine to a concrete Angular task.
Testing Angular Unit Testing TestBed Jasmine only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Changing code before reading the visible symptom or error message.
Inspect the output, state, configuration, or stack trace connected to Angular Unit Testing TestBed Jasmine.
Memorizing Angular Unit Testing TestBed Jasmine without the situation where it is useful.
Connect Angular Unit Testing TestBed Jasmine to a concrete Angular task.
The common mistake is memorizing syntax without understanding when the behavior changes or fails.
Remember the problem it solves in Angular, then attach the syntax or steps to that problem.
You can predict the result of a small example, explain a failure case, and choose it over a nearby alternative for a clear reason.
They often copy the syntax but skip the state, input, dependency, selector, route, type, or configuration that controls the behavior.
Explore 500+ free tutorials across 20+ languages and frameworks.