ng-mockito

⚠️ switched to @typestrong/ts-mockito because ts-mockito seems to not be maintained anymore (see https://github.com/NagRock/ts-mockito/issues/212) If you want to use this version of ng-mockito, you need to replace ts-mockito with @typestrong/ts-mockito:

1. npm uninstall ts-mockito.
2. npm install @typestrong/ts-mockito.
3. replace 'ts-mockito' with '@typestrong/ts-mockito' in every file (no other changes should be necessary)

Type-safe mocking for Angular, based on ts-mockito. If you use ts-mockito for your Angular project, you'll love ng-mockito! If not, you'll love it anyway 🤓️. It also integrates nicely with @testing-library/angular.

As a layer on top of ts-mockito, it's 100% compatible to it. You're still working with the usual functions (when, verify, ...). It just makes your life easier when preparing mocks for Angular-specific types.

Installation

To use this package, install it as development dependency:

npm install ng-mockito --save-dev

Additionally, install ts-mockito in the same way, if not done already (it is a peer dependency of ng-mockito):

npm install ts-mockito --save-dev

Features

Provides mockNg function to simplify mock setup:

TestBed.configureTestingModule({
  declarations: [
    ComponentUnderTest,
    mockNg(SomeChildComponent), // mockNg detects if component...
    mockNg(SomePipe), // ... pipe ...
    mockNg(SomeDirective), // ... directive ...
  ],
  providers: [mockNg(SomeService)], // ... or service is mocked.
             // 👆️
             //    Note, that you don't have to declare
             //    {provide: SomeService, useFactory: ... }

});

Even injection tokens can be mocked:

TestBed.configureTestingModule({
  providers: [
    ComponentUnderTest,
    mockNg([SOME_TOKEN, UseSomeTokenService]),
              //            👆️
              //    UseSomeTokenService must be given here, because
              //    the token's type is retrieved from its constructor to
              //    ensure type safety!
              //    Default values (like empty string, 0 or []) are used,
              //    if token type is a native / value type.
              //    Classes and interfaces are mocked automatically.

});

Stubbing Inline or Pre-setup

You can stub your mocks inline:

mockNg(TestPipe, (mockTestPipe) =>
  when(mockTestPipe.transform('test pipe input', 'test argument')).thenReturn(
    'mocked pipe output'
  )
        // 👆️
        //    mockTestPipe.transform is autocompleted by your IDE, because
        //    mockTestPipe is of type TestPipe!
        //    You'll get a compiler error, if the method signature changes.
);

Or use your pre-defined mocks (e.g. if you want to use beforeEach):

const mockTestComponent = mock(SomeChildComponent);
when(mockTestComponent.someOutput).thenReturn(testComponentOutput);
                      // 👆️
                      //    Note, that if you don't provide a default stub for someOutput
                      //    here, mockNg will create a default EventEmitter stub for you.

mockNg(mockTestComponent);

Instead of mockNg, you can also use the more specific function mockComponent, mockDirective, mockPipe, mockToken and mockProvider.

Finally, use mockAll to create multiple default mocks with a single function call:

TestBed.configureTestingModule({
  declarations: [
    ComponentUnderTest,
    ...mockAll(SomeChildComponent, SomePipe, SomeDirective)
  ],
  providers: mockAll(SomeService, OtherService)
});

Further reading

For more usage examples in combination with @testing-library/angular, please have a look at the spec file in our GitHub repo.

For more information about how to mock, stub and verify, see the ts-mockito documentation.

---

From qupaya with 🖤️

Follow us: Twitter | LinkedIn