We Keep Coding

Jest - Mock a Class from a Module (and a function that uses the get keyword) [duplicate]

In Sinon I can do the following:
var myObj = {
prop: 'foo'
};
sinon.stub(myObj, 'prop').get(function getterFn() {
return 'bar';
});
myObj.prop; // 'bar'
But how can I do the same with Jest?
I can't just overwrite the function with something like jest.fn(), because it won't replace the getter
"can't set the value of get"

For anyone else stumbling across this answer, Jest 22.1.0 introduced the ability to spy on getter and setter methods.
Edit: like in scieslak's answer below, because you can spy on getter and setter methods, you can use Jest mocks with them, just like with any other function:
class MyClass {
get something() {
return 'foo'
}
}
jest.spyOn(MyClass.prototype, 'something', 'get').mockReturnValue('bar')
const something = new MyClass().something
expect(something).toEqual('bar')

You could use Object.defineProperty
Object.defineProperty(myObj, 'prop', {
get: jest.fn(() => 'bar'),
set: jest.fn()
});

If you care about spying only, go for #Franey 's answer. However if you actually need to stub a value for the getter, this is how you can do it:
class Awesomeness {
get isAwesome() {
return true
}
}
describe('Awesomeness', () => {
it('is not always awesome', () => {
const awesomeness = new Awesomeness
jest.spyOn(awesomeness, 'isAwesome', 'get').mockReturnValue(false)
expect(awesomeness.isAwesome).toEqual(false)
})
})

In my unity test case, as it is expected to mock external dependencies, following the thomaux's answer, i had to use a real instance instead of a mocked one in beforeEach function, see the snippet bellow.
//declaration of MyExternalConfigService with getter
#Injectable()
export class MyExternalConfigService {
constructor(private readonly configService: ConfigService) {}
get myProp():string {
return this.configService.get<string>('context.myProp')
}
}
//beforeEach unit test configuration
beforeEach(async () => {
const module: TestingModule = await Test.createTestingModule({
providers: [
MyServiceToBeTested,
{
provide: MyExternalConfigService,
useValue: new MyExternalConfigService(new ConfigService())
}
]
}).compile()
service = module.get<MyServiceToBeTested>(
MyServiceToBeTested
)
configService = module.get<MyExternalConfigService>MyExternalConfigService)
})
//mocking a value to your test case
it('my test case', ()=>{
jest
.spyOn(configService, 'myProp', 'get')
.mockImplementationOnce(() => 'mockedValue')
...
)

jasmine unit testing a component which has data in a services, where that service fetches data from other service in angular 2+

I have tried to write unit testing of a httpmock one of a service which uses a method (function) to get http get call, but failed to write.
saveservice.service.ts -- file
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const envURL = sessionStorage.getItem('apiBaseURL');
httpGet<T>(url) {
const URL = envURL + url;
return this.http.get<T>(URL, httpOptions);
}
this saveservice.service file have httpGET() one, which is used by work.service.ts one
work.service.ts
import {SaveserviceService } from '../../.././my-service.service';
getworklist(employeeID){
return this.saveservice.httpGet('work/v1/works?employeeid=' + employeeID);
}
this is how workservice and save service are connected.Now I want to write unit test case for work.component.ts file,but Iam unable to write the httpmock calls there .
For info, apiUrl is present in a different file named env.ts file--
env.ts
export const apivalue= {
apiBaseUrl:"https://example.co/",
};
work.component.ts
ngOnit(){
this.employeeID:this.id;
this.workservice.getworkList(this.employeeID).subscribe(
(data) => {
this.workList = data;
console.log(" ggghfghfgh", this.worklist);
}, (error) => {
console.log(error);}
Above one is work.component.ts file for which i should write unit test cases.Please help me to complete it.
work.component.spec.ts
let httpMock: HttpTestingController;
let injector: Injector;
let workservice: WorksService;
let saveservice123: SaveService;
providers: [
Injector,
HttpClient,
HttpClientTestingModule,
saveService,
worksService
],
httpMock = TestBed.get(HttpTestingController);
workservice = TestBed.get(WorksService);
saveservice123 = TestBed.get(SaveService)
fit('getting work detsails indivually', async(() => {
fixture = TestBed.createComponent(worksComponent);
component = fixture.componentInstance;
fixture.detectChanges();
workservice.getworkList(123).subscribe(() =>{});
const request = httpMock.expectOne("work/v1/works?employeeid=")
// expect(request.request.method).toBe('httpGet');
// request.flush(xxxxx);
its throwing error
Error: Expected one matching request for criteria "Match URL: work/v1/works?employeeGuid=", found none.
Please help , how to know to write unit test cases for this type..
I also tried with spy also,but unable to complete.
const mockdata = { id:1, title: "Hello world", paste: "console.log('Hello world');"}
const spyOnAdd = spyOn(service, "getworkList").and.returnValue(mockdata);

First make sure your component implements the interface OnInit and its method ngOnint is renamed to ngOnInit.
Your component unit test should not care about how WorkService is implemented but entirely concentrate on the behavior of the component (the unit) itself under specified conditions. Therefore you must mock relevant part of the WorkService.
Assuming SaveService is the only parameter provided to the WorkService constructor, the simplest implementation of work.component.spec.ts could look as follows.
import { ComponentFixture, TestBed, fakeAsync, tick } from '#angular/core/testing';
...
describe('WorkService', () => {
const workList = [...]; // specify result of WorkService#getworklist
const workService = new WorkService(null);
let fixture: ComponentFixture<WorkComponent>;
beforeEach(fakeAsync(() => {
spyOn(workService , 'getworklist').and.returnValue(Promise.resolve(workList));
TestBed.configureTestingModule({
imports: [...],
declarations: [WorkComponent],
providers: [
{ provide: WorkService, useValue: workService }
]
});
fixture = TestBed.createComponent(WorkComponent);
component = fixture.componentInstance;
fixture.detectChanges();
tick();
}));
it('getting work details individually', () => {
expect(workService.getworklist).toHaveBeenCalled();
expect(component.workList).toEqual(workList);
});
});

Testing an rxjs get method(service), on the component

The function call on the service is like so.
get getLayerToEdit(): BehaviorSubject<VectorLayer> {
return this.layerToEdit;
}
Which is then invoked on the ngOnInit like so.
ngOnInit() {
this.annoService.getLayerToEdit.subscribe((layerToEdit: any) => {
this.layer = layerToEdit;
this.layerId = layerToEdit.ol_uid;
});
So naturally in my test I'm wanting to see if the component.layer matches what this service returns.
Test File
let component: EditFeatureComponent;
let fixture: ComponentFixture<EditFeatureComponent>;
let mockAnnoService = jasmine.createSpyObj(['getLayerToEdit', 'getCurrentAction', 'setCurrentAction']);
let layer;
The first before each code block
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EditFeatureComponent],
imports: [FormsModule, HttpClientModule],
providers: [
{ provide: AnnotationService, useValue: mockAnnoService}
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
// Fields required for the component
layer = {
layerName: 'testLayer',
ol_uid: 1
}
// Create the testbed
fixture = TestBed.createComponent(EditFeatureComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
And then the actual test
it('Should return a layer object and have a ol_uid of 1', ()=>{
mockAnnoService.getLayerToEdit.and.returnValue(of(layer))
fixture.detectChanges();
expect(component.layer).toBe(layer);
})
The test returns 'this.annoService.getLayerToEdit.subscribe is not a function'
I've also tried using subscribe rather than of.
mockAnnoService.getLayerToEdit.and.returnValue({ subscribe: () => {} })
I'm pretty ill informed on testing but this is the approach I'd normally take to test services but it's my first time testing a 'get' method from a service so I'm assuming that I'm going wrong somewhere.

Your mockAnnoService.getLayerToEdit is getter so you cannot mock it using jasmine.createSpyObj because it mocks only methods in that way.
You need to create plain object instead of mock and assign observable with needed data to the getLayerToEdit field.
Hope that helps.

How to reset a spy in Jasmine?

I have an issue where I've set up a mock service as a spy.
mockSelectionsService = jasmine.createSpyObj(['updateSelections']);
I then call that stub method twice, each time in a different test. The problem is that when i expect() the spy with .toHaveBeenCalledWith() the toHaveBeenCalledWith method also contains the arguments it was passed from the first test which produces a false positive on my second test.
How do I wipe/clear/reset the spyObject for my next test so that it no longer believes it as been called at all?
Initialisation of services/components
beforeEach(() => {
mockSelectionsService = jasmine.createSpyObj(['updateSelections']);
TestBed.configureTestingModule({
declarations: [QuickSearchComponent, LoaderComponent, SearchComponent, SearchPipe, OrderByPipe],
providers: [OrderByPipe, SearchPipe, SlicePipe, {provide: SelectionsService, useValue: mockSelectionsService}],
imports: [FormsModule, HttpClientModule]
});
fixture = TestBed.createComponent(QuickSearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
fixture.componentInstance.templates = mockTemplates;
fixture.componentInstance.manufacturers = mockManufacturers;
});

const spy = spyOn(somethingService, "doSomething");
spy.calls.reset();
This resets the already made calls to the spy. This way you can reuse the spy between tests. The other way would be to nest the tests in another describe() and put a beforeEach() in it too.

Type 1:
var myService = jasmine.createSpyObj('MyService', ['updateSelections']);
myService.updateSelections.calls.reset();
Type 2:
var myService = spyOn(MyService, 'updateSelections');
myService.updateSelections.calls.reset();
Note: Code above is tested on Jasmine 3.5

The mock service with the default return value can be set in the beforeEach() , but if you want to change the mocked service response later, do not call fixture.detectChanges() in beforEach, you can call it in each spec after applying required changes (if any), if you want to change the mock service response in an specific spec, then add it to that spec before the fixture.detectChanges()
beforeEach(() => {
serviceSpy = jasmine.createSpyObj('RealService', ['methodName']);
serviceSpy.methodName.and.returnValue(defaultResponse);
TestBed.configureTestingModule({
providers: [{provide: RealService, useValue: serviceSpy }],
...
})
...
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
// do not call fixture.detectChanges() here
});
it('test something with default mocked service response', () => {
fixture.detectChanges();
....
});
it('test something with a new mocked service response', () => {
serviceSpy.methodName.and.returnValue(newResponse);
fixture.detectChanges();
....
});

I use it like this:
let service: anyTypeYouWant;
let spyOnMethod: jasmine.Spy<(stringInput: string) => string>;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(..Your_Inject..);
spyOnMethod= spyOn(service, "myMethod");
});
it('Your Describe', () => {
expect(service.myMethod).toHaveBeenCalled();
})

add to Jelle's answer, if you got Cannot read property 'reset' of undefined when attempting mockSelectionsService.calls.reset(), try:
const spy = spyOn(somethingService, "doSomething");
spy.mockRestore();
reference: jest spyon demo: https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname

How to mock/replace getter function of object with Jest?

In Sinon I can do the following:
var myObj = {
prop: 'foo'
};
sinon.stub(myObj, 'prop').get(function getterFn() {
return 'bar';
});
myObj.prop; // 'bar'
But how can I do the same with Jest?
I can't just overwrite the function with something like jest.fn(), because it won't replace the getter
"can't set the value of get"

For anyone else stumbling across this answer, Jest 22.1.0 introduced the ability to spy on getter and setter methods.
Edit: like in scieslak's answer below, because you can spy on getter and setter methods, you can use Jest mocks with them, just like with any other function:
class MyClass {
get something() {
return 'foo'
}
}
jest.spyOn(MyClass.prototype, 'something', 'get').mockReturnValue('bar')
const something = new MyClass().something
expect(something).toEqual('bar')

You could use Object.defineProperty
Object.defineProperty(myObj, 'prop', {
get: jest.fn(() => 'bar'),
set: jest.fn()
});

If you care about spying only, go for #Franey 's answer. However if you actually need to stub a value for the getter, this is how you can do it:
class Awesomeness {
get isAwesome() {
return true
}
}
describe('Awesomeness', () => {
it('is not always awesome', () => {
const awesomeness = new Awesomeness
jest.spyOn(awesomeness, 'isAwesome', 'get').mockReturnValue(false)
expect(awesomeness.isAwesome).toEqual(false)
})
})

In my unity test case, as it is expected to mock external dependencies, following the thomaux's answer, i had to use a real instance instead of a mocked one in beforeEach function, see the snippet bellow.
//declaration of MyExternalConfigService with getter
#Injectable()
export class MyExternalConfigService {
constructor(private readonly configService: ConfigService) {}
get myProp():string {
return this.configService.get<string>('context.myProp')
}
}
//beforeEach unit test configuration
beforeEach(async () => {
const module: TestingModule = await Test.createTestingModule({
providers: [
MyServiceToBeTested,
{
provide: MyExternalConfigService,
useValue: new MyExternalConfigService(new ConfigService())
}
]
}).compile()
service = module.get<MyServiceToBeTested>(
MyServiceToBeTested
)
configService = module.get<MyExternalConfigService>MyExternalConfigService)
})
//mocking a value to your test case
it('my test case', ()=>{
jest
.spyOn(configService, 'myProp', 'get')
.mockImplementationOnce(() => 'mockedValue')
...
)