在 Vue JS 应用程序中测试从 API 获取数据的代码

Question

我正在尝试编写单元测试，对以下代码使用 vue-test-utils 和 Jest 以了解是否正在分配数据属性。

代码如下：

  created () {
    this.loadGridAndContent()
  },
  methods: {
    async loadGridAndContent () {
      let result = await AppService.loadDashboard(this.userDetails.psref).catch(err => console.log(err))
      this.dashBoardData = result.data[0]
      this.dashBoardDataClone = JSON.parse(JSON.stringify(this.dashBoardData))
    }
  }

AppService 是

import Api from '@/services/api.service'

export default {
  async loadDashboard (psRef) {
    return Api().get('/user/' + psRef + '/dashboard')
      .catch(error => {
        console.log(error)
      })
  },
  async reorderDashboard (dashBoardOrderData) {
    return Api().put('/user/favourites/reorderdashboard', { NewOrder: dashBoardOrderData })
      .catch(error => {
        console.log(error)
      })
  }
}

它的模拟是

export default {
  loadDashboard: jest.fn(() => Promise.resolve([
    { db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 1, dxp_ref: 926 },
    { db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 2, dxp_ref: 927 },
    { db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
  ]))
}

Api.js 是：

import axios from 'axios'

export default () => {
  return axios.create({
    baseURL: ``,
    withCredentials: false,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  })
}

这是测试：

describe('DashBoard component tests', () => {
  let state
  let store
  let wrapper

  beforeEach(() => {
    state = {
      auth: {
        user: {
          auids: '',
          md_clock: 0,
          md_picture: '',
          ps_fname1: '',
          ps_surname: '',
          psname: 'Test Test',
          psref: 0
        }
      }
    }

    store = new Vuex.Store({
      state
    })

    wrapper = mount(Dashboard, {
      localVue,
      store
    })
  })

  afterEach(() => {
    wrapper.destroy()
  })

  it('it should assign dashBoardData to the result of AppService.loadDashboard', async () => {
    // expect.assertions(1)
    let dashBoardData = [
      { db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 1, dxp_ref: 926 },
      { db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 2, dxp_ref: 927 },
      { db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
    ]
    let resp = { data: dashBoardData }

    console.log(loadDashboard.getMockImplementation)
    loadDashboard.mockResolvedValue(resp)
    //loadDashboard.mockImplementation(() => Promise.resolve(resp))

    await flushPromises()
    expect(wrapper.vm.dashBoardData).toEqual(dashBoardData)
  })
})

本质上，我想我是在嘲笑 app.service 的解析值，然后等待承诺并断言数据属性已分配。然而，我被扔了

'TypeError: Cannot read property '0' of undefined

at VueComponent.loadGridAndContent
(C:\WebApp\WebApp_Vue_Frontend\src\views\dashboard\Dashboard.vue:93:1) at process._tickCallback (internal/process/next_tick.js:68:7)'

而且我不确定为什么会这样。任何想法将不胜感激。

Answer 1

由于您的 axios 调用是 GET 请求，您应该查看文档：

  axios.get(url)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

这就是说，您可以像这样使用回调（或更现代的 Promises）：

async loadDashboard (psRef, callback) {
    Api().get('/user/' + psRef + '/dashboard')
    .then(function(response){
        callback(response.data);
    })
    .catch(error => {
        console.log(error)
    })
}

并改变你的方法：

async loadGridAndContent () {
    await AppService.loadDashboard(this.userDetails.psref, this.callback).catch(err => console.log(err))
}

callback(data){
    this.dashBoardData = data[0]
    this.dashBoardDataClone = JSON.parse(JSON.stringify(this.dashBoardData))
}

总而言之，您要等待 get() 完成，然后再使用上面的代码完成的响应。

希望对您有所帮助。

我是新来的，所以如果有错误，请告诉我。

Answer 2

解决方案是真正正确地模拟 loadDashboard 函数的解析值，例如

export default {
  loadDashboard: jest.fn(() => Promise.resolve({ data: [
    [
      { db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 1, dxp_ref: 926 },
      { db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 2, dxp_ref: 927 },
      { db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
    ]
  ] }))
}

在 Vue JS 应用程序中测试从 API 获取数据的代码

Testing code that fetches data from API in a Vue JS application

javascript

jestjs

vuejs2

vue-test-utils