Migrating Jest into an Angular Project

Jest is the best option to test your old and new projects. Compared to the graphic web interface that Karma & Jasmine offer, Jest implements a completely command-line interface, making it the quickest way to test your components.

On the other hand, Karma & Jasmine are completely joined to the Angular framework, and to some extent, the documentation and the community It's pretty good. However, Jest is used by multiple JavaScript frameworks, and the community and documentation are so extensive.

Your projects will use Karma and Jasmine by default if you use the Angular schematics. However, the migration is pretty simple. Let's check what we need to do:

For this example, I'm going to use a basic Angular project created with the ng new schematics:

Then, if I run the command:

npm run test

I'll get:

As you can see, all my test cases are running and passing without any problems. The idea at the end of the migration is to get the same result but using Jest.

1] Let's install jest as a dev dependency:

npm install jest jest-preset-angular --save-dev

2] Let's create the Jest config file

In your root folder, create a file called: jest.config.js and add the following configuration:

1module.exports = {
2  preset: 'jest-preset-angular',
3  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
4  collectCoverage: true,
5  coverageReporters: ['text'],
6  roots: ['<rootDir>/src/'],
7  testMatch: ['**/+(*.)+(spec).+(ts)'],
8  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
9  collectCoverage: true,
10  coverageReporters: ['html', 'text']
11};
12

This configuration will show all the relevant information on the command line when you run the test command.

3] In your package.json let's update the test script:

1{
2  ...
3  "scripts": {
4    ...
5    "test": "jest"
6    ...
7  },
8  ...
9}
10

4] Update the global test file. Go to src/test.ts and replace all the content with:

1import 'jest-preset-angular/setup-jest';
2
3Object.defineProperty(window, 'CSS', {value: null});
4Object.defineProperty(window, 'getComputedStyle', {
5  value: () => {
6    return {
7      display: 'none',
8      appearance: ['-webkit-appearance']
9    };
10  }
11});
12
13Object.defineProperty(document, 'doctype', {
14  value: '<!DOCTYPE html>'
15});
16
17Object.defineProperty(document.body.style, 'transform', {
18  value: () => {
19    return {
20      enumerable: true,
21      configurable: true
22    };
23  }
24});
25

This file will refer to Jest and not to Karma.

5] Uninstall Karma & Jasmine In order to get rid of all the Karma & Jasmine dependencies let's run:

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

6] Finally, you could delete the karma.conf.js file.

Now, let's run:

npm run test

And you should get something like this:

That's it, we just migrate Jest into an existing Angular project. All the code can be found in this Repository. Go to the branch jest-migration to see the final result.