ng-mocks

What is ng-mocks?

ng-mocks is a powerful library for Angular that simplifies the process of creating mock components, directives, pipes, and services for unit testing. It helps developers to isolate the unit of work and test it without dependencies on other parts of the application.

What are ng-mocks's main functionalities?

Mock Components

This feature allows you to create mock versions of Angular components. This is useful for isolating the component under test from its child components.

import { MockComponent } from 'ng-mocks';
import { MyComponent } from './my-component';

TestBed.configureTestingModule({
  declarations: [MockComponent(MyComponent)]
});

Mock Directives

This feature allows you to create mock versions of Angular directives. This is useful for isolating the component under test from its directives.

import { MockDirective } from 'ng-mocks';
import { MyDirective } from './my-directive';

TestBed.configureTestingModule({
  declarations: [MockDirective(MyDirective)]
});

Mock Pipes

This feature allows you to create mock versions of Angular pipes. This is useful for isolating the component under test from its pipes.

import { MockPipe } from 'ng-mocks';
import { MyPipe } from './my-pipe';

TestBed.configureTestingModule({
  declarations: [MockPipe(MyPipe)]
});

Mock Services

This feature allows you to create mock versions of Angular services. This is useful for isolating the component under test from its services.

import { MockProvider } from 'ng-mocks';
import { MyService } from './my-service';

TestBed.configureTestingModule({
  providers: [MockProvider(MyService)]
});

Other packages similar to ng-mocks

jest

Jest is a delightful JavaScript testing framework with a focus on simplicity. It provides a powerful mocking library that can be used to mock functions, modules, and timers. While Jest is not specific to Angular, it can be used in conjunction with Angular to achieve similar mocking capabilities.

sinon

Sinon is a standalone test spies, stubs, and mocks library for JavaScript. It works with any unit testing framework and provides powerful mocking capabilities. Like Jest, Sinon is not specific to Angular but can be used to mock dependencies in Angular applications.

ts-mockito

ts-mockito is a mocking library for TypeScript inspired by the Java library Mockito. It provides a simple API for creating mock objects and verifying interactions. ts-mockito is not specific to Angular but can be used to mock dependencies in Angular applications.

README

Mock components, services and more out of annoying dependencies for simplification of Angular testing

ng-mocks facilitates Angular testing and helps to:

• mock Components, Directives, Pipes, Modules, Services and Tokens
• reduce boilerplate in tests
• access declarations via simple interface

The current version of the library has been tested and can be used with:

Angular	ng-mocks	Jasmine	Jest	Ivy
18	latest	yes	yes	yes
17	latest	yes	yes	yes
16	latest	yes	yes	yes
15	latest	yes	yes	yes
14	latest	yes	yes	yes
13	latest	yes	yes	yes
12	latest	yes	yes	yes
11	latest	yes	yes	yes
10	latest	yes	yes	yes
9	latest	yes	yes	yes
8	latest	yes	yes
7	latest	yes	yes
6	latest	yes	yes
5	latest	yes	yes

Important links

• Documentation with examples of Angular testing
• CHANGELOG
• GitHub repo
• NPM package

• Live example on CodeSandbox
• Live example on StackBlitz

• start a discussion on GitHub
• ask a question on Stackoverflow
• report an issue on GitHub
• chat on gitter

Very short introduction

Global configuration for mocks in src/test.ts. In case of jest, src/setup-jest.ts / src/test-setup.ts should be used.

// All methods in mock declarations and providers
// will be automatically spied on their creation.
// https://ng-mocks.sudo.eu/extra/auto-spy
ngMocks.autoSpy('jasmine'); // or jest

// ngMocks.defaultMock helps to customize mocks
// globally. Therefore, we can avoid copy-pasting
// among tests.
// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock
ngMocks.defaultMock(AuthService, () => ({
  isLoggedIn$: EMPTY,
  currentUser$: EMPTY,
}));

An example of a spec for a profile edit component.

// Let's imagine that there is a ProfileComponent
// and it has 3 text fields: email, firstName,
// lastName, and a user can edit them.
// In the following test suite, we would like to
// cover behavior of the component.
describe('profile:builder', () => {
  // Helps to reset customizations after each test.
  // Alternatively, you can enable
  // automatic resetting in test.ts.
  MockInstance.scope();

  // Let's configure TestBed via MockBuilder.
  // The code below says to mock everything in
  // ProfileModule except ProfileComponent and
  // ReactiveFormsModule.
  beforeEach(() => {
    // The result of MockBuilder should be returned.
    // https://ng-mocks.sudo.eu/api/MockBuilder
    return MockBuilder(
      ProfileComponent,
      ProfileModule,
    ).keep(ReactiveFormsModule);
    // // or old fashion way
    // return TestBed.configureTestingModule({
    //   imports: [
    //     MockModule(SharedModule), // mock
    //     ReactiveFormsModule, // real
    //   ],
    //   declarations: [
    //     ProfileComponent, // real
    //     MockPipe(CurrencyPipe), // mock
    //     MockDirective(HoverDirective), // mock
    //   ],
    //   providers: [
    //     MockProvider(AuthService), // mock
    //   ],
    // }).compileComponents();
  });

  // A test to ensure that ProfileComponent
  // can be created.
  it('should be created', () => {
    // MockRender is an advanced version of
    // TestBed.createComponent.
    // It respects all lifecycle hooks,
    // onPush change detection, and creates a
    // wrapper component with a template like
    // <app-root ...allInputs></profile>
    // and renders it.
    // It also respects all lifecycle hooks.
    // https://ng-mocks.sudo.eu/api/MockRender
    const fixture = MockRender(ProfileComponent);

    expect(
      fixture.point.componentInstance,
    ).toEqual(assertion.any(ProfileComponent));
  });

  // A test to ensure that the component listens
  // on ctrl+s hotkey.
  it('saves on ctrl+s hot key', () => {
    // A fake profile.
    const profile = {
      email: '[e-mail]',
      firstName: 'testFirst2',
      lastName: 'testLast2',
    };

    // A spy to track save calls.
    // MockInstance helps to configure mock
    // providers, declarations and modules
    // before their initialization and usage.
    // https://ng-mocks.sudo.eu/api/MockInstance
    const spySave = MockInstance(
      StorageService,
      'save',
      jasmine.createSpy(), // or jest.fn()
    );

    // Renders <profile [profile]="params.profile">
    // </profile>.
    // https://ng-mocks.sudo.eu/api/MockRender
    const { point } = MockRender(
      ProfileComponent,
      { profile }, // bindings
    );

    // Let's change the value of the form control
    // for email addresses with a random value.
    // ngMocks.change finds a related control
    // value accessor and updates it properly.
    // https://ng-mocks.sudo.eu/api/ngMocks/change
    ngMocks.change(
      '[name=email]', // css selector
      '[e-mail]', // an email address
    );

    // Let's ensure that nothing has been called.
    expect(spySave).not.toHaveBeenCalled();

    // Let's assume that there is a host listener
    // for a keyboard combination of ctrl+s,
    // and we want to trigger it.
    // ngMocks.trigger helps to emit events via
    // simple interface.
    // https://ng-mocks.sudo.eu/api/ngMocks/trigger
    ngMocks.trigger(point, 'keyup.control.s');

    // The spy should be called with the user
    // and the random email address.
    expect(spySave).toHaveBeenCalledWith({
      email: '[e-mail]',
      firstName: profile.firstName,
      lastName: profile.lastName,
    });
  });
});

Profit.

Extra

If you like ng-mocks, please support it:

• with a star on GitHub
• with a tweet

Thank you!

P.S. Feel free to contact us if you need help.

Changelog

14.13.1 (2024-08-25)

Bug Fixes

• unable to bind ngIf in angular 17+ (7c816e6), closes #8884

Features

• a18 support (e2c1dff)