title: Testing code that fetches data from API in a Vue JS application
body: <p>I'm trying to write a unit test, using <code>vue-test-utils</code> and <code>Jest</code> for the following code to understand whether the data properties are being assigned.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>  created () {
      this.loadGridAndContent()
    },
    methods: {
      async loadGridAndContent () {
        let result = await AppService.loadDashboard(this.userDetails.psref).catch(err =&gt; console.log(err))
        this.dashBoardData = result.data[0]
        this.dashBoardDataClone = JSON.parse(JSON.stringify(this.dashBoardData))
      }
    }
  </code></pre>
  
  <p>AppService is </p>
  
  <pre><code>import Api from '@/services/api.service'
  
  export default {
    async loadDashboard (psRef) {
      return Api().get('/user/' + psRef + '/dashboard')
        .catch(error =&gt; {
          console.log(error)
        })
    },
    async reorderDashboard (dashBoardOrderData) {
      return Api().put('/user/favourites/reorderdashboard', { NewOrder: dashBoardOrderData })
        .catch(error =&gt; {
          console.log(error)
        })
    }
  }
  </code></pre>
  
  <p>It's mock is </p>
  
  <pre><code>export default {
    loadDashboard: jest.fn(() =&gt; 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 }
    ]))
  }
  </code></pre>
  
  <p>Api.js is:</p>
  
  <pre><code>import axios from 'axios'
  
  export default () =&gt; {
    return axios.create({
      baseURL: ``,
      withCredentials: false,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
  }
  </code></pre>
  
  <p>Here is the test: </p>
  
  <pre><code>describe('DashBoard component tests', () =&gt; {
    let state
    let store
    let wrapper
  
    beforeEach(() =&gt; {
      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(() =&gt; {
      wrapper.destroy()
    })
  
    it('it should assign dashBoardData to the result of AppService.loadDashboard', async () =&gt; {
      // 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(() =&gt; Promise.resolve(resp))
  
      await flushPromises()
      expect(wrapper.vm.dashBoardData).toEqual(dashBoardData)
    })
  })
  </code></pre>
  
  <p>Essentially, I think I'm mocking the <code>app.service</code>'s resolved value, then awaiting for promises and asserting that the data property has been assigned. However, I am being thrown</p>
  
  <blockquote>
    <p>'TypeError: Cannot read property '0' of undefined</p>
    
    <p>at VueComponent.loadGridAndContent<br>
    (C:\WebApp\WebApp_Vue_Frontend\src\views\dashboard\Dashboard.vue:93:1)
       at process._tickCallback (internal/process/next_tick.js:68:7)'</p>
  </blockquote>
  
  <p>and I'm not sure why this is the case. Any ideas would be appreciated.</p>