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

Question

I'm trying to write a unit test, using vue-test-utils and Jest for the following code to understand whether the data properties are being assigned.

Here is the code:

  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 is

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)
      })
  }
}

It's mock is

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 is:

import axios from 'axios'

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

Here is the test:

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)
  })
})

Essentially, I think I'm mocking the app.service's resolved value, then awaiting for promises and asserting that the data property has been assigned. However, I am being thrown

'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)'

and I'm not sure why this is the case. Any ideas would be appreciated.

user_5475518 · Answer

The solution was to actually correctly mock the resolved values of loadDashboard function such as

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 }
    ]
  ] }))
}

user_10940779 · Answer

As your axios call is a GET request, you should have a look at the documentation:

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

This said, you can work with callbacks (or Promises, which is more modern) like this:

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

And change your methods:

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))
}

All in all, you want to wait for the get() to be finished, before you use the response, which is done with the code above.

Hope this helped you.

I am pretty new here so if there was a mistake, please tell me.

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

2 Answers