Vue JS 애플리케이션의 API에서 데이터를 가져오는 테스트 코드

Vue JS 애플리케이션의 API에서 데이터를 가져오는 테스트 코드

단위 테스트를 작성하려고 합니다.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))
    }
  }

App Service는

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: 정의되지 않은 속성 '0'을 읽을 수 없습니다.

VueComponent.loadGridAndContent에서
(C:\WebApp\)WebApp_Vue_Frontend\src\views\dashboard\Dashboard.vue:93:1)가 처리 중입니다._tickCallback (내부/프로세스/다음_tick.js:68:7)'

왜 그런지 모르겠어요어떤 아이디어라도 주시면 감사하겠습니다.

해결책은 실제로 해결된 가치를 조롱하는 것이었습니다.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 }
    ]
  ] }))
}

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

즉, 다음과 같이 콜백(또는 보다 현대적인 Promise)을 사용할 수 있습니다.

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()이 완료될 때까지 기다린 후 응답을 사용합니다.이 응답은 위의 코드로 이루어집니다.

도움이 되셨길 바랍니다.

제가 이 곳에 처음 왔기 때문에 혹시 실수가 있으면 말씀해 주세요.

언급URL : https://stackoverflow.com/questions/58502565/testing-code-that-fetches-data-from-api-in-a-vue-js-application