@smazzoleni/testbed-extended NPM

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 on two libraries:

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. Name and API are still a work in progress. There might be major breaking changes in the next weeks, so use it at your own risks.

Prerequisits

Angular 6 or above
Jest 24

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:

Installation

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

yarn add -D @smazzoleni/testbed-extended @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/testbed-extended';
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 'testbed-extended'`, () => {
        expect(host.testInstance.title).toEqual('testbed-extended');
    });

    it('should render title', () => {
        expect(
            host.container.querySelector('.content span').textContent,
        ).toContain('testbed-extended 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 test 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/testbed-extended';
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 'testbed-extended'`, () => {
        expect(
            host.queryByText('testbed-extended app is running!'),
        ).toBeInTheDocument();
    });
});