During my Vue component testing, I encountered an issue with a method that utilizes a basic fetch operation to update a data value within the .finally() block. Despite verifying that my test successfully reaches the .finally() block, the data value fails to update.
The method in question looks like this:
updateProfile () {
fetch(updateProfileEndPoint, {
method: 'POST',
body: {email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="403425333400342533346e232f2d">[email protected]</a>, id: 1234, name: 'bob},
})
.catch((error) => {
this.errorField = true;
})
.finally(() => {
this.profileUpdated = true;
});
Within my Jest test environment, the setup includes:
const wrapper = mount(ProfileComponent, { store,
data () {
return {
profileUpdated: false,
};
},
});
global.fetch = jest.fn(() =>
Promise.resolve({
profileUpdate: 'complete',
})
);
wrapper.vm.updateProfile();
expect(wrapper.vm.profileUpdated).toBe(true);
Despite confirming through console.log(this.profileUpdate) that the value does indeed update to true, the tests continue to receive false.