Angular, by default, comes with Jasmine; it is a great testing framework. I spent one year and a half running and writing tests with Jasmine, it works, but the market is moving to Jest and Testing library.

Don't get scared because Jest is more straightforward and compatible with your Jasmine test.

This post aims to guide how to eliminate Jasmine and Karma and set up Jest and the testing library.

Why move to Jest and Testing library?

I moved all my Angular projects to Jest and the testing library for a few reasons.

Jest is:

• Faster than Karma.

• Easy to read test reports.

• Code Coverage out of the box

• Excellent command-line interface to interact with the tests.

• Great community support.

The Testing library is:

• Focus user test

• So fast and easy.

If you are looking for the easy way use jest schematic github.com/briebug/jest-schematic

Remove Jasmine and Karma

To remove the package, delete them from package.json and save it.

"@types/jasmine": "~3.10.0",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
 "karma-chrome-launcher": "~3.1.0",
 "karma-coverage": "~2.1.0",
 "karma-jasmine": "~4.0.0",
 "karma-jasmine-html-reporter": "~1.7.0",

And run the npm install command from the terminal again to update to npm to remove unused packages.

Next, delete the karma.conf.js and src/test.ts files.

    rm karma.conf.js 
     rm src/test.ts

Remove the test area from angular.json.

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }

Next, install and configure Jest for our angular app.

Install and configure Jest

We will run the following command in our terminal to install the jest library, Jest preset for angular, and jest types for typescript.

npm install --save-dev jest jest-preset-angular @types/jest

In your project root, create the setup-jest.ts file and import the angular preset.

import 'jest-preset-angular/setup-jest';

Into the package.json file edit, the script test: "ng test" to `test: "jest"`

"scripts": { 
"ng": "ng", 
"start": "ng serve", 
"build": "ng build", 
"watch": "ng build --watch --configuration development", 
"test": "jest" 
}

Add a Jest area to load jest-preset-angular and use the jest configuration file.

"jest": { 
  "preset": "jest-preset-angular", 
   "setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"] 
}

Edit tsconfig.json into the compiler option : json "esModuleInterop": true, Edit tsconfig.spec.json, remove node and Jasmine to Jest, close similar to my example:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Because jasmine tests are compatible, we run our existing test running the test script from the terminal.

npm run test

> lab@0.0.0 test
> Jest

 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (169 ms)
    ✓ should have as title 'lab' (43 ms)
    ✓ should render title (47 ms)

Test Suites: 1 passed, one total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.635 s, estimated 4 s
Ran all test suites.

Install the testing library

The @testing-library helps test UI components in the user way.

npm install --save-dev @testing-library/angular

Create an app.component.ui.spect.ts file, and we use the testing library to play with the UI.

First, import render, and screen from @testing-library/angular, they render help us to load the component and screen provides an extensive list o ways to find elements in the browser.

Our quick example shows the "Next steps" text to learn more about using the testing library, testing-library.com/docs.

We use the await keyword to wait for render and screen results.

import { render, screen } from '@testing-library/angular';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  it('should render Welcome', async () => {
    await render(AppComponent);
    await screen.getByText('Welcome');
  });
});

Run your test again

npm run test

> lab@0.0.0 test
> Jest

 PASS  src/app/app.component.spec.ts
 PASS  src/app/app.ui.component.spec.ts

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        4.631 s
Ran all test suites.

Summary

In short, we learned how to remove karma and Jasmine, install and configure Jest running our existing test, and add the testing library in our angular projects.

Hopefully, that will give you a bit of help with the Jest and Testing library. If you enjoyed this post, share it!