VueJs。笑话。我在模拟Axios通话时遇到问题

Question

我正在使用JEST进行测试

这是我的api.js，它是端点列表

import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'http://172.16.3.171:8085',

});

export default {

    displayApplications()
    {
        return apiClient.get('/getData/application/list');
    },
    getActiveApplicationsCount(){
        return apiClient.get('/getData/ActiveApplicationCount');
    },
    getInactiveApplicationsCount(){
        return apiClient.get('/getData/InActiveApplicationCount');
    },
    getTotalApplicationsCount(){
        return apiClient.get('/getData/AllApplicationCount');
    },
    postSaveApplication(){
        return apiClient.post('/getData/application/addOrUpdate',formData);
    }
}

这里我在methods{}中调用显示函数：

async displayData(){
    try {
      console.log('in displayData:---*****---')
      const response =  await this.$api.displayApplications().then(res => {
        this.rows = res.data;
        console.log("Data is: ",this.rows)
      });
    } catch (error) {
        console.log("Error in displayData",error)
    }
    }, 

这是我的*.spec.js文件

import { shallowMount  } from "@vue/test-utils";
import Applications from "@/components/dashboard/admin/Applications.vue";
import mockAxios from "axios";

beforeEach(() => {
    cmp = shallowMount(Applications, {
      data() {
        return {
          form: {
            applicationName: "",
            applicationUrl: ""
          }
        };
      },
    });
    jest.mock('../../../../api.js');
    jest.resetModules();
    jest.clearAllMocks();
  });

it("axios call for displayData()", async () => {
    mockAxios.api.displayApplications(() =>Promise.resolve({
      data: {
        results: [
          { applicationName: "hello", url: "hello.co.in", status: "active" }
        ]
      }
    }) );
    const result = await api.displayApplications();
    // cmp.vm.displayData = result
    expect(result).toEqual([
      { applicationName: "hello", url: "hello.co.in", status: "active" }
    ]);
});
});

我还在单独的文件中创建了模拟axios。 在模拟文件夹中。

module.exports = {
        create: jest.fn(() => Promise.resolve({data: {} })),
        get: jest.fn(() => Promise.resolve({ data : { } })),
        post: jest.fn(() => Promise.resolve({data : { } })),
}

在我在组件内部使用get调用之前，它一直在工作。 现在，api调用位于单独的文件中。

我很困惑如何模拟 api.js 文件并使其在测试中工作。 我收到此错误。

  console.log src/components/dashboard/admin/Applications.vue:1399
    Error in displayData TypeError: Cannot read property 'displayApplications' of undefined
        at VueComponent.displayData (D:\RPF Project\rpf-project\src\components\dashboard\admin\Applications.vue:1386:52)
        at VueComponent.created (D:\RPF Project\rpf-project\src\components\dashboard\admin\Applications.vue:1409:12)
        at invokeWithErrorHandling (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:1850:57)
        at callHook (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:4201:7)
        at VueComponent.Vue._init (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:4983:5)
        at new VueComponent (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:5128:12)
        at createComponentInstanceForVnode (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:3277:10)
        at init (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:3108:45)
        at createComponent (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:5952:9)
        at createElm (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:5899:9)
        at VueComponent.patch [as __patch__] (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:6449:7)
        at VueComponent.Vue._update (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:3927:19)
        at VueComponent.updateComponent (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:4048:10)
        at Watcher.get (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:4459:25)
        at new Watcher (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:4448:12)
        at mountComponent (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:4055:3)
        at VueComponent.Object.<anonymous>.Vue.$mount (D:\RPF Project\rpf-project\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
        at mount (D:\RPF Project\rpf-project\node_modules\@vue\test-utils\dist\vue-test-utils.js:8649:21)
        at shallowMount (D:\RPF Project\rpf-project\node_modules\@vue\test-utils\dist\vue-test-utils.js:8677:10)
        at Object.beforeEach (D:\RPF Project\rpf-project\src\test\spec\dashboard\admin\Applications.spec.js:9:11)
        at Object.asyncJestLifecycle (D:\RPF Project\rpf-project\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:53:37)
        at resolve (D:\RPF Project\rpf-project\node_modules\jest-jasmine2\build\queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (D:\RPF Project\rpf-project\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
        at promise.then (D:\RPF Project\rpf-project\node_modules\jest-jasmine2\build\queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)