---
title: "How To Migrate from Jasmine to Jest and Testing Library in Angular"
date: "2021-12-26"
slug: "how-to-migrate-from-jasmine-to-jest-and-testing-library-in-angular"
author: "Dany Paredes"
canonical: "https://danywalls.com/how-to-migrate-from-jasmine-to-jest-and-testing-library-in-angular"
description: "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 straig..."
---

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 https://github.com/briebug/jest-schematic

## Remove Jasmine and Karma

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

```json
"@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.

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

Remove the test area from angular.json.

```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.

```bash
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.

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

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

```json
"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.

```json
"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:

```json
{
  "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.

```bash
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.

```bash
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, https://testing-library.com/docs/.

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

```typescript
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

```bash
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!