Vue test utils not recognising $http in the tests

Question

Have a Vue app with axios setup and is using it as this.$http.get in the components and that is working fine.

In running the specs using Jest I get an error: Cannot read property 'get' of undefined

I know I can mock axios with maxios. How do I get Jest to recognise $http so it does not throw an error?

Georg Grab · Accepted Answer · 2018-05-25 13:36:22Z

1

You'll need to create a local instance of Vue for your tests, to which you introduce the Vue Plugins you are using, such as axios.

import { createLocalVue, shallowMount } from "@vue/test-utils"
import axios from 'axios'
import VueAxios from 'vue-axios'


const localVue = createLocalVue();
localVue.use(VueAxios, axios)

and later, in your actual tests:

it('should mount the component where I want to use $http', () => {
    const wrapper = shallowMount(MyApiComponent, { localVue });
    ... do stuff to wrapper here ...
})

answered May 25, 2018 at 13:36

Georg Grab

2,2931 gold badge20 silver badges29 bronze badges

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

1 Comment

andreofthecape Over a year ago

Thanks for the reply Georg. I have done as above. Unfortunately I still get TypeError: Cannot read property 'get' of undefined when running the test

Collectives™ on Stack Overflow

Vue test utils not recognising $http in the tests

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related