Angular and Jest - Here's how to write your first basic Angular test

Since when is writing Angular tests such a soul sucking task?

The underwhelming guide to writing your first test for an Angular service using Jest

Introduction

I remember as an Angular novice the mind-boggling thought of writing tests for my Angular apps.

And then later the guilty feeling of deploying an Angular app multiple times a day without any kind of tests.

Man oh man! Convincing me to write tests for an Angular application would've been like trying to force a toddler to eat their peas.

Now, I know I'm not the only guy on the block that used to think like this. Test syndrome is common.

But nail Angular tests and you'll become a honking-powerful, test-cranking Angular wizard.

Installing & Configuring Jest

Installing and configuring Jest can be a thorny job.

It involves changing various config files. And an overlooked comma could make your Angular application sputter like a dying cow.

But fortunate for us a band of developers teamed up and bundled all the needed changes and stuff into a simple Angular package. It does all the magic for you and made me feel like a million bucks when I first took it for a spin.

Installation is as easy as...

ng add @briebug/jest-schematic

During the installation it automatically takes care of the following.

• Installs Jest, types and a builder.
• Adds Jest configuration files.
• Removes Karma & Jasmine along with their configuration files.

And that's it! We just leapfrogged a chunk of work. No guilt trips needed.

Writing the Angular Service

Now we'll quickly add a basic Angular service to our project.

ng generate service number

We'll add an add function to do some simple math for us. Once done the new service file will look like this.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NumberService {

  constructor() { }

  add(x: number, y: number): number {
    return x + y;
  }

}

Basic example? Yes buddy, I realize that. But let's start simple so that we can write some complex tests later.

Testing the Angular Service with Jest

Next we open up the number.service.spec.ts file and add a basic test.

it('should be 7', () => {
    var result = service.add(3, 4);
    expect(result).toEqual(7);
});

And a second test.

it('should not equal 7', () => {
    var result = service.add(3, 4);
    expect(result).not.toEqual(8);
});

Our test file looks like this.

import { TestBed } from '@angular/core/testing';

import { NumberService } from './number.service';

describe('NumberService', () => {
  let service: NumberService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(NumberService);
  });

  it('should be 7', () => {
    var result = service.add(3, 4);
    expect(result).toEqual(7);
  });

  it('should not equal 7', () => {
    var result = service.add(3, 4);
    expect(result).not.toEqual(8);
  });

});

Conclusion

Take it from here buddy and stop being a wanna-be but a gonna-be when it comes to writing tests for your Angular applications. It'll put you on the path to becoming a honking-powerful, test-cranking Angular expert.

Questions or comments? Don't hesitate to contact me.

Angular Consultant