Jest is a JavaScript test runner for executing automated tests and reporting successes, failures, and discovered problems. Angular applications historically used Karma, but Karma is deprecated and Angular added experimental Jest support starting with Angular v16. section 8.2.1 section 8.7
Table 8.1 Karma vs. Jest
|
Karma
|
Jest
|
|---|---|
|
Developed by the Angular team
|
Developed by Facebook
|
|
Runs in a real browser
|
Runs in a NodeJS environment
|
|
Has to spin up the browser itself and then run the tests inside it, sometimes resulting in slower performance
|
Runs as an independent JS program, with no browser, and can be faster
|
|
No need to mock the browser’s built-in functionality, as it already runs in a real browser
|
We can’t directly use browser APIs here, as Jest runs in a NodeJS runtime; for instance, if our component calls
localStorage, we will have to mock it for the tests to run correctly
|
|
Allows for cross-browser testing: if our application uses APIs that might not exist in some older browsers, we can configure Karma to use several different browsers and see if the tests pass on all of them
|
No real cross-browser testing
|
Compare Jest and Karma across runtime, performance, browser API handling, and cross-browser testing. section 8.2.1
Jest runs as an independent JavaScript program in a Node.js environment rather than launching a real browser. This can improve performance, but browser APIs such as localStorage must be mocked, and Jest does not provide direct cross-browser testing. section 8.2.1
A basic Angular Jest setup connects the runner to the project through:
- tsconfig.spec.json, which includes .spec.ts files and supplies Jest types. section 8.2.2
- angular.json, whose test builder and options switch the Angular test target to Jest. section 8.2.2
- Jest, jest-environment-jsdom, and @types/jest installed as development dependencies. section 8.2.2
- jest.config.ts and setup-jest.ts, which provide runner configuration and additional setup. section 8.2.2
Running component specs
Running ng test executes the describe blocks, beforeEach setup, and individual it specifications. A typical Angular spec configures TestBed, creates a component fixture, and uses expect to check initialization, properties, or rendered template content. section 8.3.1
A failing spec can expose incomplete test configuration rather than an application defect; for example, the generated AppComponent test fails when TestBed cannot provide HttpClient. Jest can also support tests for services and migration from existing Karma projects, although compatibility problems may need investigation and resolution. section 8.2.2 section 8.6
Jest supports unit testing for Angular components and services, including standalone components. Additional testing libraries such as ng-mocks and Angular Testing Library can extend the testing experience. section 8.7
