Myujth

I am using the VueAxios wrapper for HTTP request in my Vue.js app.

Here is a simplified version of my API service:

//api.service.js
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";

const ApiService = {
 init() 
 Vue.use(VueAxios, axios);
 ,
 get(resource, id = "") 
 return Vue.axios.get(`$resource/$id`);
 ,

And my (simplified and failing) API test:

// api.spec.js

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import createLocalVue from "@vue/test-utils";

jest.mock("axios"); 
jest.mock("vue-axios"); // Not sure if I need one or both or neither.

describe("the running store actions test", () => {

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

 test("that a resource is fetched via the API", async () => 
 Vue.axios.get.mockImplementationOnce(() =>
 Promise.resolve(
 data: 
 )
 );
 ...
 // Some test calling the get() method in api.service.js above.
);

The problem is that a get the following error when I run the test:

TypeError: Cannot read property 'get' of undefined

 42 | 
> 43 | Vue.axios.get.mockImplementationOnce(() =>
 | ^
 44 | Promise.resolve(
 45 )

 at Object.get (tests/unit/store/api.spec.js:43:19)

I have played around by changing the api.spec.js file to not use VueAxios and then just mocked Axios normally, e.g.,

 get(resource, id = "") 
 return axios.get(`$resource/$id`).catch(error => 
 throw new Error(`ApiService $error`);
 );
 ,

The test then runs and passes without an issue.

However, I would like to get the test to pass using VueAxios. Any ideas will be much appreciated.