Jest ESM — Total Guide To More Than 100% Faster Testing For Angular⚡

Let’s learn how to speed up our Angular Jest tests by more than 100% by switching to Jest ESM (a notoriously problematic migration) and how to solve all the troublesome issues that tend to pop up along the way!

Idea, Prompts, Composition & Design by Tomas Trajan, Gen by MindJourney

In my case, the final speed up was close to 290% from 50 seconds to only 17 seconds which is a huge win!

Jest is by far the most popular frontend test runner and for a good reason!

NPM downloads

Jest runs tests in parallel and we can even specify how many workers should be used to match the cores of our machine, which makes it really fast!

For these reasons, Jest became the go to replacement for the Karma test runner which comes out of the box in Angular CLI workspaces.

This article focuses on Jest ESM integration in standard Angular CLI workspaces using plain jesttogether with jest-preset-angular. There are many other ways to use Jest with your Angular projects including @angular-builders/jest or out of the box support in NX monorepo. That being said, the concepts and approaches in this article should be helpful when trying to migrate or troubleshoot Jest ESM in any of the above listed solutions!

ESM

When speaking about Jest ESM, we’re talking about Jest working in mode where it understands and uses EcmaScript Modules, especially the ESM import / export syntax. This should be more than familiar as it’s something we’re using in Angular TypeScript files since the beginning… (learn more)

import addDays from 'date-fns/addDays'; // ESM default import
import { Component } from '@angular/core'; // ESM import

@Component({/*...*/})
export class AppComponent {} // ESM export

TLDR;

• Jest is fast until it isn’t therefore we have to bother with ESM