DEV Community

Cover image for Migrate from Jasmine to Jest and Testing Library in Angular
Dany Paredes for This is Angular

Posted on

Migrate from Jasmine to Jest and Testing Library in Angular

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 get rid of Jasmine and Karma and set up Jest and testing library.

Why move to Jest and Testing library?

I decided to move all my Angular projects to Jest and testing library for a few reasons.

Jest is:

  • Faster than Karma.
  • Easy to read test reports.
  • Code Coverage out of the box
  • Great 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 to the easy way use jest schematic https://github.com/briebug/jest-schematic

Remove Jasmine and Karma

To remove the package, delete them from the 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",
Enter fullscreen mode Exit fullscreen mode

And run the npm install command from the terminal again to npm remove not used packages.

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

    rm karma.conf.js 
     rm src/test.ts 
Enter fullscreen mode Exit fullscreen mode

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": []
          }
Enter fullscreen mode Exit fullscreen mode

Next, install and configure Jest for our angular app.

Install and configure Jest

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

npm install --save-dev jest jest-preset-angular @types/jest
Enter fullscreen mode Exit fullscreen mode

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

import 'jest-preset-angular/setup-jest';
Enter fullscreen mode Exit fullscreen mode

Into the package.json file edit the scripttest: "ng test" to test: "jest"

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

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"]
  }
Enter fullscreen mode Exit fullscreen mode

Edit tsconfig.json into the compiler option :

"esModuleInterop": true,
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Install the testing library

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

npm install --save-dev @testing-library/angular
Enter fullscreen mode Exit fullscreen mode

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, render help us to load the component, and screen provide an extensive list o ways to find elements in the browser.

In our quick example, we find 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.

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');
  });
});

Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Summary

Well, 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!

Discussion (5)

Collapse
ronaldohoch profile image
Ronaldo Hoch

Hello and thank you! I have seen many developers going to Jest...
Let me ask you, the package @testing-library/angular replaces the test file created by ng generate component comand or i need to create the component skiping test and after run the jest schematic?

Collapse
danywalls profile image
Dany Paredes Author

Hi, the package @testing-library/angular extends DOM Testing library adding APIs for working with Angular components easy, like simplify detect changes etc.

You don't need to delete the test generate by angular-cli, by default is compatible with Jest. You will start to use the jest functions instead of jasmine.

Collapse
ronaldohoch profile image
Ronaldo Hoch

hmm, i understood! Thank you.

Collapse
divstar profile image
divStar

Excuse me, so what you are saying, is: we should be using "@testing-library/angular" instead of jest / karma? Also what about jasmine? Should I remove it, too, and use "jest..."?

Collapse
danywalls profile image
Dany Paredes Author

Yes, you can remove jasmine and use jest, because is a testing library and test runner :D