Skip to content
Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time
Feb 25, 2021
Mar 14, 2020

chat on gitter npm version build status coverage status language grade

Mock components, services and more out of annoying dependencies in Angular tests

ng-mocks helps to:

  • mock Components, Directives, Pipes, Modules, Services and Tokens
  • facilitate 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
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

Very short introduction

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

// All methods in mock declarations and providers
// will be automatically spied on their creation.
ngMocks.autoSpy('jasmine'); // or jest

// ngMocks.defaultMock helps to customize mocks
// globally. Therefore, we can avoid copy-pasting
// among tests.
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', () => {
  // First of all, we would like to reuse the same
  // TestBed in every test.
  // ngMocks.faster suppresses reset of TestBed
  // after each test and allows to use TestBed,
  // MockBuilder and MockRender in beforeAll.

  // Now we would like to configure TestBed that
  // ProfileComponent would stay as it is, and
  // all its dependencies would be mocks.
  // Even more, if a dependency is missing,
  // we would like to get a failing test.
  // Also, we would like to rely on reactive forms,
  // therefore we would like to avoid its mocking.
  beforeAll(() => {
    // The result of MockBuilder should be returned.
    return MockBuilder(

  // A test to ensure that ProfileModule imports
  // and declares all the dependencies.
  it('should be created', () => {
    // MockRender respects all lifecycle hooks,
    // onPush change detection, and creates a
    // wrapper component with a template like
    // <app-root ...allInputs></profile>
    const fixture = MockRender(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: '',
      firstName: 'testFirst2',
      lastName: 'testLast2',

    // A spy to track save calls.
    // MockInstance helps to configure mock
    // providers, declarations and modules
    // before their initialization and usage.
    const spySave = MockInstance(

    // Renders <profile [profile]="params.profile">
    // </profile>.
    const { point } = MockRender(
      { 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.
      '[name=email]', // css selector
      'test3@em.ail', // an email address

    // Let's ensure that nothing has been called.

    // 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.
    ngMocks.trigger(point, 'keyup.control.s');

    // The spy should be called with the user
    // and the random email address.
      email: 'test3@em.ail',
      firstName: profile.firstName,
      lastName: profile.lastName,



If you like ng-mocks, please support it:

Thank you!

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