Supercharge your

Angular tests

with Jest

Michal Szczepaniak

Twitter: @frontend_mike
Senior Angular dev
Working at Divante Ltd.

?

Problems with jasmine testing

initial build times are slow
productivity is lower than it should be
error messages are vague at best

What is Jest? 1

delightful JavaScript Testing Framework
with a focus on simplicity
code coverage out-of-the-box
snapshot testing
using jsdom under the hood
parallel tests

Speed

"As an experiment, 100 libs were generated and tested using Karma and Jest. Karma took around 15 minutes while Jest finished in only 4 minutes! The tests run in this experiment are identical between the two test runners which means the difference is due to the differences between the two test runners."

- Nrwl Team (Nx founders) 4

Immersive watch mode

DEMO

jest features

1-2-3 Migration

1. Delete not needed packages

2. Install new packages 2

3. Alter package.json

4. Last one (I promise) setupJest.ts

Alternative setup 3

Briebug's Angular-Jest schematics:

installs Jest, it's dependencies, and new scripts
adds necessary files for Jest to work with Angular
removes unnecessary Karma files and configuration

Additional work for Angular 8

https://itnext.io/how-i-do-configure-jest-to-test-my-angular-8-project-2bd84a21d725

Kudos to Tran Son Hoang

Migrating codebase

no need to change assertions
differences in mocking

jest-codemods

SNAPSHOT TESTING

"A good snapshot stops a moment from running away."

- Eudora Welty

Snapshot testing 5

take any serialisable object, create a snapshot and then compare your changes with the previously taken snapshot
snapshots do not have to be created by hand