THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
In this tutorial, You learned how to do unit test static methods of typescript classes. It includes an example of how to test a component using the static method in Angular.
Let’s declare an ES6 class in typescript with static methods.
export class StaticClass {
static getMessage(name: string): String {
return 'Hi' + name + 'Welcome to my blog';
}
}
Here is a Unit test class for the ES6 class with a static method
- jasmine API has a
spyonto mock the methods with an instance of a class or a class itself. - It accepts arguments with
withArgs. - The return value is returned with
returnValue - and accepts arguments and return value
- Unit testing a function is to pass different values
- And assert the following
- passed values to static function and compare expected and actual value
- Check static function is called or not using the
toHaveBeenCalledmethod
it('Calling getMessage', () => {
let spyStaticClass = spyOn(StaticClass, "getMessage")
.withArgs("John").and.returnValue("welcome");
StaticClass.getMessage("John")
expect(StaticClass.getMessage).toHaveBeenCalled();
expect(StaticClass.getMessage).toHaveBeenCalledWith("John");
expect(StaticClass.getMessage("John")).toEqual("welcome");
})
Unit testing Angular component using the static method
Suppose you are using a static class in the Angular component, In this example, You are calling the static method inside the ngOnInit() method
import { Component } from '@angular/core';
import { StaticClass } from './StaticClass';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = '';
constructor() { }
ngOnInit() {
this.title = StaticClass.getMessage('john');
}
}
}
Following is a unit test for the given static function inside a component.
it('should call ngInit and call static methods ', () => {
const fixture = TestBed.createComponent(AppComponent);
const component = fixture.componentInstance;
let spyStaticClass = spyOn(StaticClass, "getMessage").and.returnValue("welcome")
StaticClass.getMessage("John")
fixture.detectChanges();
component.ngOnInit();
expect(StaticClass.getMessage).toHaveBeenCalled();
expect(StaticClass.getMessage).toHaveBeenCalledWith("John");
expect(StaticClass.getMessage("John")).toEqual("welcome");
});
Mock Static method in Jest framework
There are a number of ways we can do mock
using the jest spyon method which works the same as the jasmine spyon method.
it('getMessage', () => {
let spyStaticClass = jest.spyOn(StaticClass, "getMessage")
.withArgs("John").and.returnValue("welcome");
StaticClass.getMessage("John")
expect(StaticClass.getMessage).toHaveBeenCalled();
expect(StaticClass.getMessage).toHaveBeenCalledWith("John");
expect(StaticClass.getMessage("John")).toEqual("welcome");
})
Another way is using mock classes with jest implementation
- Create a mock class for the class using jest. Mocked syntax
- Write a mock implementation for the static method
- Check for the assertion of whether the static class is called or not
it('getMessage with jest', () => {
const MockStaticClass = StaticClass as jest.Mocked<typeof StaticClass>;
MockStaticClass.getMessage.mockImplementation((item) => 'Welcome' + item);
expect(MockStaticClass.getMessage).toHaveBeenCalled();
})
Conclusion
You learned mocking unit testing for static methods inside es6 classes using jasmine and jest API.
