Skip to main content

How to get a mock instance of any class in Angular tests

warning

If you are here in order to mock a service or a token, please read corresponding section about MockProvider.

If you want to change default mock behavior, please read how to customize mocks.

If you need a mock object of a class which does not belong to Angular declarations, for instance HTMLInputElement, then, please, continue reading.

A mock instance of a class in Angular tests can be created by MockService function. The mock instance has the same methods as the original class, but all of them are dummies. Additionally, MockService accepts a shape of the desired instance, in order to customize its properties and methods.

const i1 = MockService(MyClass);// i1.method() returns undefined
const i2 = MockService(MyClass, {  method: () => 'My Custom Behavior',});// i2.method() returns 'My Custom Behavior'

It is useful, when a class has dozens of methods, whereas we want to change behavior of a few of them.

Simple example#

Let's suppose that a service has a method which returns HTMLInputElement, but we would like to mock the service along with its HTMLInputElement, because TargetComponent calls its focus() in ngOnInit like this.htmlService.input.focus().

TestBed.configureTestingModule({  declarations: [TargetComponent],  providers: [    // profit    MockProvider(HtmlService, {      input: MockService(HTMLInputElement),    }),  ],});