Testing Angular Faster with Jest - Xfive (2024)

This article was last updated on Apr 6, 2023, so the setup works with the latest Angular and Jest versions. If you still have troubles with your project setup, please open an issue in the jest-preset-angularproject.

Note: This article assumes you are using an Angular CLI v1.0 generated project from Angular v4.0.0. But it, too, works on Angular v2.x with CLI in beta.

Despite Angular being a comprehensive framework with lots of default abstractions: e.g., custom JIT andAOT compilers, deepRxJS, andZone.js integration, it’s still possible to work outside of its toolbox. Interestingly, it’s possible to change the default test runner. This post will tell you why and how you can do it.

If you ever felt blue, tired, and hopeless while running your Angular app slow test suite with Karma in your favorite browser (and I’m not talking about injecting every possible component into your test file), keep reading.

What if I tell you that you can:

• run your Angular tests without a browser
• run the test suite several times faster
• rerun instantly only tests related to the latest code changes?

Meet Jest 🃏

Jest is a painless JavaScript testing platform. If this doesn’t tell you much, it’s probably because you had to spend all your free time running slow Karma tests 😅. Let me introduce it briefly:

• Jest is a testing platform widely adopted by many large companies and swiftly adopted by the React community.
• It sits on top of Jasmine, so the API is nearly identical.
• It has all of its API documented, along with guides, examples, and a helpful community on forums like Reactiflux and Stack Overflow.
• Focuses on Developer Experience (speed and ease of use are the priority.)
• Provides meaningful error messages.
• Runs on Continuous Integration servers without extra tooling (abstracting the DOM with jsdomlibrary.)
• Provides code coverage out of the box.
• Integrates with Babel and TypeScript seamlessly.

And what’s most important is that it provides a smart,immersive watch mode. The watch mode runs only tests affected by git file changes – it also runs failed tests first and is able to bail on first error, so the feedback loop is ~10x faster than with Karma, depending on test suite size.

To the point – I want my Angular tests faster now!

We need to install the necessary dependencies (I’m using yarn, but if you fancy npm, no problems):

$ yarn add -D jest jest-preset-angular @types/jest

where:

• jest – Jest testing platform
• jest-preset-angular – configuration preset with common settings setup for you
• @types/jest – Jest typings

To setup Jest, we will need a few more steps:

In your project root, create a setup-jest.ts file with the following contents:

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

Additionally, you’ll need to create the jest.config.js file in your project root directory with the following contents:

module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'], globalSetup: 'jest-preset-angular/global-setup',};

Adjust your tsconfig.spec.json to be:

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

This is most likely all configuration you'll need. I've extracted common configuration options into the jest-preset-angular package, which should just work™ for most cases. Please go to the library documentation for up-to-date instructions on how to set it up correctly for your project.

You’re now ready to add this to your npm scripts:

"test": "jest --verbose","test:watch": "jest --watch",

...and change the way you test Angular apps forever.

Oh, one more thing. Forget about installing PhantomJS on your CI:

"test:ci": "jest --runInBand",

It's worth noting that CI servers usually run your code on a single core so parallelization may slow your tests down. If you're experiencing such behavior, use --runInBand flag to tell Jest explicitly that you want to run tests one-by-one (just like Karma or Mocha).

Caveats

Of course, there are some. But surprisingly, not many.

Migration from Jasmine

We’ll need to migrate some of Jasmine calls to Jest. Mostof the API is similar, but there are slight differences.

Below are listed the required changes to be made in your codebase.

• jasmine.createSpyObj('name', ['key'])--> jest.fn({key: jest.fn()})
• remove @types/jasminemodule (duplicate TS declarations from @types/jest)

After portingjasmine.createSpyObj(), you can come back later to migrate the rest of the functions, which are optional at the time of writing (this may change in the future):

• jasmine.createSpy('name')--> jest.fn()
• and.returnValue()--> mockReturnValue()
• spyOn(...).and.callFake(() => {})--> jest.spyOn(...).mockImplementation(() => {})
• Asymmetric matchers: jasmine.any, jasmine.objectContaining, etc. --> expect.any, expect.objectContaining

Farewell browser, our tests now run in jsdom

You can also bump into APIs available in browsers but not in jsdom, like htmlElement.closest or window.localStorage (which we just mocked in jestGlobalMocks.ts).

Zone.js messy error stack trace

I couldn't force Zone to output shorter and more meaningful error stack traces. As a workaround, you can add Error.stackTraceLimit = 2; to your setupJest.ts or whatever number suits you. I find it useful in most cases.

IDE integrations

Be sure also to check these awesome extensions to ease the testing experience even more:

• vscode-jest
• WebStorm
• Atom (work in progress)

Summary

I was truly amazed that it’s possible to integrate a 3rd party testing tool not running in a browser, like Jest, into Angular. A couple of days ago, I still thought it would be impossible to do so within a reasonable amount of time, and it was not worth the effort, but it turned out it was so worth it.

Our app's whole test suite of 35 files with ~100 tests executed 2.5x faster than with Karma. We can also usesnapshot testing. What’s most important, though, we now have a powerful watch mode, rerunning tests instantly. And all of this without compiling the app or running a dev server.

So if you care about your testing experience, do yourself a favor and run Angular tests with Jest. You’ll love it.

And don't forget to star it on GitHub!

If you find problems with the setup presented or spot a bug, please file an issue in the jest-preset-angular GitHub repository.