NgBench

NgBench is a library that enhances the original @angular/core/testing/TestBed. Its goal is to reduce boiler plate when writing unit tests for angular project using jests.

NgBench relies on two external libraries:

• https://testing-library.com/docs/angular-testing-library/intro
• https://www.npmjs.com/package/ng-mocks

NgBench takes advantage of Typescrit's generics and type definitions to enhance test writing experience, by offering a fluent syntax and rich accurate typing.

Disclaimer

This library is still in it's early days and it's API is a work in progress. There might be major breaking changes in the next weeks, so use it at your own risks. The version number is aligned on angular version.

Prerequisites

• @angular/common: >=11.0.0
• @angular/core: >=11.0.0
• @testing-library/angular: >=10.0.0
• @testing-library/dom: >=8.10.0
• @testing-library/jest-dom: >=5.11.0
• @testing-library/user-event: >=12.0.0
• jest: >=26.0.0
• lodash: >=4.17.15
• ng-mocks: >=10.0.0
• typescript: >=3.8.0

We assume you are using jest for unit testing your Angular applications. If you're not, you may take a look at Jest builder for Angular build facade to replace easily karma/jasmine by jest.

Although not required, we recommend usage of these extra jest matchers:

• jest-extended
• jest-dom

Installation

npm install -D @smazzoleni/ng-bench @testing-library/angular lodash ng-mocks

or

yarn add -D @smazzoleni/ng-bench @testing-library/angular lodash ng-mocks

Usage

The default app.component.spec.ts generated by Angular CLI can now be replaced by

import { RouterTestingModule } from '@angular/router/testing';
import { Host, NgBench } from '@smazzoleni/ng-bench';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
    let host: Host<AppComponent>;

    beforeEach(async () => {
        host = await NgBench.testComponent(AppComponent)
            .import(RouterTestingModule)
            .createHost();
    });

    it('should create the app', () => {
        expect(host.testInstance).toBeTruthy();
    });

    it(`should have as title 'ng-bench'`, () => {
        expect(host.testInstance.title).toEqual('ng-bench');
    });

    it('should render title', () => {
        expect(
            host.container.querySelector('.content span').textContent,
        ).toContain('ng-bench app is running!');
    });
});

However, according to @testing-library guidelines, the tests should resemble the way the software is used and deal with DOM nodes rather than component instances. Also, we don't want the tests to be tied to the document internal structure. Hence, tests should look more like:

import { RouterTestingModule } from '@angular/router/testing';
import { Host, NgBench } from '@smazzoleni/ng-bench';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
    let host: Host<AppComponent>;

    beforeEach(async () => {
        host = await NgBench.testComponent(AppComponent)
            .import(RouterTestingModule)
            .createHost();
    });

    it('should create', () => {
        expect(host.container).toBeInTheDocument();
    });

    it(`should have as title 'ng-bench'`, () => {
        expect(
            host.queryByText('ng-bench app is running!'),
        ).toBeInTheDocument();
    });
});

and now what?

Example above just scratches the surface of the possibilities. More detailed examples are available here