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	standalone	signals	defer
20	latest	yes	yes	yes	yes	no	no
19	latest	yes	yes	yes	yes	no	no
18	latest	yes	yes	yes	yes	no	no
17	latest	yes	yes	yes	yes	no	no
16	latest	yes	yes	yes	yes	no
15	latest	yes	yes	yes	yes
14	latest	yes	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.

1// All methods in mock declarations and providers
2// will be automatically spied on their creation.
3// https://ng-mocks.sudo.eu/extra/auto-spy
4ngMocks.autoSpy('jasmine'); // or jest
5
6// ngMocks.defaultMock helps to customize mocks
7// globally. Therefore, we can avoid copy-pasting
8// among tests.
9// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock
10ngMocks.defaultMock(AuthService, () => ({
11  isLoggedIn$: EMPTY,
12  currentUser$: EMPTY,
13}));

An example of a spec for a profile edit component.

1// Let's imagine that there is a ProfileComponent
2// and it has 3 text fields: email, firstName,
3// lastName, and a user can edit them.
4// In the following test suite, we would like to
5// cover behavior of the component.
6describe('profile:builder', () => {
7  // Helps to reset customizations after each test.
8  // Alternatively, you can enable
9  // automatic resetting in test.ts.
10  MockInstance.scope();
11
12  // Let's configure TestBed via MockBuilder.
13  // The code below says to mock everything in
14  // ProfileModule except ProfileComponent and
15  // ReactiveFormsModule.
16  beforeEach(() => {
17    // The result of MockBuilder should be returned.
18    // https://ng-mocks.sudo.eu/api/MockBuilder
19    return MockBuilder(
20      ProfileComponent,
21      ProfileModule,
22    ).keep(ReactiveFormsModule);
23    // // or old fashion way
24    // return TestBed.configureTestingModule({
25    //   imports: [
26    //     MockModule(SharedModule), // mock
27    //     ReactiveFormsModule, // real
28    //   ],
29    //   declarations: [
30    //     ProfileComponent, // real
31    //     MockPipe(CurrencyPipe), // mock
32    //     MockDirective(HoverDirective), // mock
33    //   ],
34    //   providers: [
35    //     MockProvider(AuthService), // mock
36    //   ],
37    // }).compileComponents();
38  });
39
40  // A test to ensure that ProfileComponent
41  // can be created.
42  it('should be created', () => {
43    // MockRender is an advanced version of
44    // TestBed.createComponent.
45    // It respects all lifecycle hooks,
46    // onPush change detection, and creates a
47    // wrapper component with a template like
48    // <app-root ...allInputs></profile>
49    // and renders it.
50    // It also respects all lifecycle hooks.
51    // https://ng-mocks.sudo.eu/api/MockRender
52    const fixture = MockRender(ProfileComponent);
53
54    expect(
55      fixture.point.componentInstance,
56    ).toEqual(assertion.any(ProfileComponent));
57  });
58
59  // A test to ensure that the component listens
60  // on ctrl+s hotkey.
61  it('saves on ctrl+s hot key', () => {
62    // A fake profile.
63    const profile = {
64      email: 'test2@email.com',
65      firstName: 'testFirst2',
66      lastName: 'testLast2',
67    };
68
69    // A spy to track save calls.
70    // MockInstance helps to configure mock
71    // providers, declarations and modules
72    // before their initialization and usage.
73    // https://ng-mocks.sudo.eu/api/MockInstance
74    const spySave = MockInstance(
75      StorageService,
76      'save',
77      jasmine.createSpy(), // or jest.fn()
78    );
79
80    // Renders <profile [profile]="params.profile">
81    // </profile>.
82    // https://ng-mocks.sudo.eu/api/MockRender
83    const { point } = MockRender(
84      ProfileComponent,
85      { profile }, // bindings
86    );
87
88    // Let's change the value of the form control
89    // for email addresses with a random value.
90    // ngMocks.change finds a related control
91    // value accessor and updates it properly.
92    // https://ng-mocks.sudo.eu/api/ngMocks/change
93    ngMocks.change(
94      '[name=email]', // css selector
95      'test3@em.ail', // an email address
96    );
97
98    // Let's ensure that nothing has been called.
99    expect(spySave).not.toHaveBeenCalled();
100
101    // Let's assume that there is a host listener
102    // for a keyboard combination of ctrl+s,
103    // and we want to trigger it.
104    // ngMocks.trigger helps to emit events via
105    // simple interface.
106    // https://ng-mocks.sudo.eu/api/ngMocks/trigger
107    ngMocks.trigger(point, 'keyup.control.s');
108
109    // The spy should be called with the user
110    // and the random email address.
111    expect(spySave).toHaveBeenCalledWith({
112      email: 'test3@em.ail',
113      firstName: profile.firstName,
114      lastName: profile.lastName,
115    });
116  });
117});

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.