How to write unit tests using Jest Framework with Angular code?

[ranjithkumar_m]

Hi Team,
I have implemented more of the test cases using the Jest framework with Angular code. But I couldn’t cover the below-mentioned code. While I’m writing the test case, I’m getting the error Fetch method is not a function.

Could you please provide the solution?

Method : **
async getManageObject(): Promise {
** const baseUrl = inventory/managedObjects;
** try {**
** const response = await this.fetchClient.fetch(baseUrl, {**
** method: “GET”,**
** headers: { “Content-Type”: “application/json”}**
** });**
** return await response.json(); **
** } catch (error) {**
** console.error(error);**
** return null;**
** }**
** }**

Unit test case:

** it(‘getManageObject Method: getManageObject method API call return data’, fakeAsync(() => { **
** let response :any={**
** “managedObjects”: [**
** {**
** “name”: “document”,**
** “self”: “https://inventory/managedObjects/123456”,**
** “id”: “123456”,**
** “c8y_IsBinary”: “”,**
** “length”: 498369,**
** “contentType”: “multipart/form-data; boundary=--------------------------87651329938”**
** }**
** ]**
** };**
** // let spy = jest.spyOn(mockUserManualService, ‘getManageObject’).mockReturnValue(Promise.resolve(response));**
** mockUserManualService.getManageObject();**
** //expect(spy).toHaveBeenCalled();**
** }));**

TypeError: this.fetchClient.fetch is not a function
at DocumentService. (C:\Cockpit-UI\custom-widgets\Document\service\document-service.ts:19:47)
at Generator.next ()
at C:\Cockpit-UI\custom-widgets\Document\service\document-service.ts:1795:41
at new ZoneAwarePromise2 (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:1351:25)
at Object..__awaiter (C:\Cockpit-UI\custom-widgets\document\service\document-service.ts:1738:10)
at DocumentService.getManageObject (C:\Cockpit-UI\custom-widgets\Document\service\document-service.ts:1834:12)
at C:\Cockpit-UI\custom-widgets\Document\component\document-hub.component.spec.ts:128:31
at fakeAsyncFn (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:5637:34)
at _ZoneDelegate2.invoke (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:409:30)
at ProxyZoneSpec2.onInvoke (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:3830:43)
at _ZoneDelegate2.invoke (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:408:56)
at Zone3.run (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:169:47)
at Object.wrappedFunc (C:\Cockpit-UI\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:4330:34)
at Promise.then.completed (C:\Cockpit-UI\node_modules\jest-circus\build\utils.js:391:28)
at new Promise ()
at callAsyncCircusFn (C:\Cockpit-UI\node_modules\jest-circus\build\utils.js:316:10)
at _callCircusTest (C:\Cockpit-UI\node_modules\jest-circus\build\run.js:218:40)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at _runTest (C:\Cockpit-UI\node_modules\jest-circus\build\run.js:155:3)
at _runTestsForDescribeBlock (C:\Cockpit-UI\node_modules\jest-circus\build\run.js:66:9)
at _runTestsForDescribeBlock (C:\Cockpit-UI\node_modules\jest-circus\build\run.js:60:9)
at run (C:\Cockpit-UI\node_modules\jest-circus\build\run.js:25:3)
at runAndTransformResultsToJestFormat (C:\Cockpit-UI\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapterInit.js:170:21)

[Tristan_Bastian]

Hi,

For unit tests you would want to mock the requests/responses from external systems instead of actually calling fetch here.

In case you want to use services via dependency injection you would either need to include the module that provides the service. Otherwise you would have to manually provide it or a mock of it.

Regards,
Tristan