error detecting global http method from vue test

Question

I'm running vue3 and testing a vue component using the vue test utils library and in the component i am making an api call like this:

 const api = this.$http.publisher.fetchValidatedWebsites();

I have this global http variable registered

    app.config.globalProperties.$http =  HttpServiceFactory(HttpClient);

HttpServicefactory returns publisher like so:

const httpServiceFactory = (HttpClient) => ({
    publisher: PublisherService(HttpClient),
});

and in the PublisherService i have my fetchValidatedWebsites() method; but when i run the test

expect(wrapper.vm.$http.publisher.fetchValidatedWebsites)
            .toHaveBeenCalledTimes(1);

i get this error:

TypeError: Cannot read property 'fetchValidatedWebsites' of undefined

Seems like for some reason the vm doesn't recognise this variable.

In my package.json:

    "vue": "^3.2.12",
    "@vue/test-utils": "^2.0.0-rc.21"

How do i go about fixing this?

Ninowis · Accepted Answer · 2022-11-03 11:36:37Z

0

You need to register $http as a global mock in your vue-test-utils config.

Try something like:

import { config } from '@vue/test-utils'

config.global.mocks = {
  $http: (HttpClient) => ({
    publisher: PublisherService(HttpClient),
  })
}

answered Nov 3, 2022 at 11:36

Ninowis

4442 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1