Encountering a "then is not a function" error when attempting to mock an HTTP promise service

Question

Encountering a "then is not a function" error when attempting to mock an HTTP promise service

Unique service

fetchPopupData(Docversion, versionname, Structureweek, docVersionFieldID, versionid, WLTP) {
        return this.http.get(this.apiUrl + 'GetElementPopUpData?docVersion=' + Docversion + '&versionVariant=' + versionname
            + '&structureWeek=' + Structureweek + '&docVersionFieldID=' + docVersionFieldID
            + ' &VersionId=' + versionid + ' &isWLTP=' + WLTP, { withCredentials: true })
            .toPromise().then(response => <CoCCreateVersionPopupPage[]>response.json())
            .catch(error => {
                return error;
            });
    }

Using the unique service in component

this.popupService.fetchPopupData(this.docInfo.version,
            this.docInfo.versionName,
            this.docInfo.week, this.docInfo.fieldID, this.docInfo.id,
            this.docInfo.WLTP)
            .then(
            data=> { ...});

Simulated service using constructor injection

fetchPopupData(Docversion, versionname, Structureweek, docVersionFieldID, versionid, WLTP) {
        return Observable.of({ Result: {} });
    }

An error occurred during testing of the method

TypeError: this.popupService.fetchPopupData(...).then is not a function

I understand the cause of the error - I am using Observable in my simulated service while the actual service relies on promise, causing issues with the then callback. Please advise on how to create a simulated service for an http promise service call.

angular unit-testing typescript jasmine observable

Answer 1

Answer №1

Which testing framework do you prefer to use?

To conduct tests, I often employ the spy technique using Jasmine:

spyOn(createversionservice, 'getVersionDataValuesforPopup')

This allows you to verify if your function was invoked.

If you need to return a promise, you can utilize the .andReturnValue() method as demonstrated below:

var promise = Promise.resolve('result');
spyOn(createversionservice, 'getVersionDataValuesforPopup').andReturnValue(promise);

Equivalent methods exist in various other testing frameworks as well.

You can then assert that the method was called (or any other desired test) like so:

expect(createversionservice.getVersionDataValuesforPopup).toHaveBeenCalled()

Answer 2

Which testing framework do you prefer to use?

To conduct tests, I often employ the spy technique using Jasmine:

spyOn(createversionservice, 'getVersionDataValuesforPopup')

This allows you to verify if your function was invoked.

If you need to return a promise, you can utilize the .andReturnValue() method as demonstrated below:

var promise = Promise.resolve('result');
spyOn(createversionservice, 'getVersionDataValuesforPopup').andReturnValue(promise);

Equivalent methods exist in various other testing frameworks as well.

You can then assert that the method was called (or any other desired test) like so:

expect(createversionservice.getVersionDataValuesforPopup).toHaveBeenCalled()

Answer 3

Answer №2

Could you kindly attempt the following:

create a new Promise that resolves to an empty object
return new Promise((resolve) => { resolve({}); });

Answer 4

Could you kindly attempt the following:

create a new Promise that resolves to an empty object
return new Promise((resolve) => { resolve({}); });

Answer 5

Answer №3

I was able to fix the issue by implementing the following code:

Promise.resolve({then: jest.fn()})

Answer 6

I was able to fix the issue by implementing the following code:

Promise.resolve({then: jest.fn()})

Encountering a "then is not a function" error when attempting to mock an HTTP promise service

Answer №1

Answer №2

Answer №3

Similar questions

Xtermjs does not support copying and pasting functionalities

Is it possible to initiate a request action in both the constructor and ngOnInit method?

Generating a default template for an Angular ag-Grid cell with a custom field name - how to do it?

Dev error occurs due to a change in Angular2 pipe causing the message "has changed after it was checked"

Discovering a specific property of an object within an array using Typescript

Include various classes within the [ngclass] directive

The parameter type 'IScriptEditorProps' does not accept arguments of type 'string'

Encountering the error "No overload matches this call" while utilizing useQuery in TypeScript may indicate a mismatch in function parameters

Guide on incorporating the authorization function from next-auth into a TypeScript Next.js 13 app directory

The Docker image was successfully constructed, but unfortunately it is not located local when executing the coverage test in Azure pipeline

What is the best way to design a circular icon using OpenLayers?

How do I determine if a child component is in a dirty state within CanDeactivateGuard when dealing with multiple form tags?

Problems encountered when utilizing $in operator in Mikro ORM MongoDB operations

Having trouble retrieving information from Vuex store in Vue component when using TypeScript

Enhancing AWS Amplify Auth elements using TypeScript

TestingCompilerFactory is not available as a provider

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

What is the best way to send an object to an Angular form?

Using Angular to transfer a function to a directive

Dynamic cell editing feature in PrimeNG table