如何测试在其创建的挂钩内使用存储操作的组件

我有一个带有以下created钩子的组件,我正在尝试为该组件编写一些测试

  async created () {
    this.result = await this.applyFilter({ keyword: this.keyword })
    this.bids = this.result.Bids
    this.count = this.result.Count
    this.pages = this.result.Pages
    console.log('Result: ',this.result)
  },

这是测试:

import { createLocalVue,mount } from '@vue/test-utils'
import mutationobserver from 'mutationobserver-shim'
import flushPromises from 'flush-promises'
import Vuex from 'vuex'
import BootstrapVue from 'bootstrap-vue'
import Bids from '@/views/bids/Bids'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library as falibrary } from '@fortawesome/fontawesome-svg-core'
import { faSearch,faUndo,faRandom,faTrashAlt } from '@fortawesome/free-solid-svg-icons'

falibrary.add(faSearch,faTrashAlt)

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(BootstrapVue)
localVue.use(mutationobserver) // This is a necessary polyfill for Bootstrap-Vue
localVue.component('font-awesome-icon',FontAwesomeIcon)

describe('Bids component tests',() => {
  let store
  let modules
  let wrapper

  const $route = { path: '/bids' }

  const bidsDashBoardData = {
    'dxp_dashboardref': 4,'dxp_position': 1,'db_name': 'Bids','dxp_ref': 991,'dxp_hidden': 0
  }

  const user = {
    'psref': 30288,'psname': 'asfsafsafsa','md_clock': 1318,'md_picture': './images/400/IMG_5862','auids': 'asfsafsa','isAuthenticated': true,'expires': '[native Date Mon Nov 25 2019 17:02:24 GMT+0000 (Greenwich Mean Time)]'
  }

  let bids = [
    { 'wf_ref': 584,'ref': 6140,'title': 'Bid No. 6140','value': 'Windermere Steamboat Museum #2','order': 1,'status': 'Lost / Cancelled','type': 'bids','to': 'app.bids' },{ 'wf_ref': 1942,'ref': 7634,'title': 'Bid No. 7634','value': 'The Dragon School Music Building','order': 2,'status': 'Lost',{ 'wf_ref': 585,'ref': 7635,'title': 'Bid No. 7635','value': 'Lambeth Palace library and Archive','order': 3,'status': 'Won','to': 'app.bids' }
  ]

  beforeEach(() => {
    modules = {
      app: {
        namespaced: true,getters: {
          getBidsDashBoardData: () => bidsDashBoardData,getBids: () => bids
        },actions: {
          loadAllFavourites: jest.fn()
        }
      },auth: {
        namespaced: true,getters: {
          getUser: () => user
        }
      },bids: {
        namespaced: true,state: {
          keyword: '',page: 1
        },actions: {
          applyFilter: jest.fn(),updateBidsPage: jest.fn()
        }
      }
    }

    store = new Vuex.Store({
      modules
    })

    wrapper = mount(Bids,{
      localVue,store,mocks: {
        $route
      }
    })
  })

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

  it('is a Vue instance',async () => {
    let result = {
      'Count': 5852,'Pages': 59,'Page': 1,'Bids': [
        { 'nj_ref': 5943,'nj_numb': 9350,'nj_name': 'Tustin Estate Old Kent Road','nj_date': '2019-10-10T23:00:00.000Z','btype': 'Masterplanning' },{ 'nj_ref': 5942,'nj_numb': 9349,'nj_name': 'Beyond90-AIX','nj_date': '2019-09-26T23:00:00.000Z','btype': 'Other Projects' },{ 'nj_ref': 5941,'nj_numb': 9348,'nj_name': 'BE Education','nj_date': '2019-09-19T23:00:00.000Z','btype': 'Secondary Schools' },{ 'nj_ref': 5940,'nj_numb': 9347,'nj_name': 'Trinity College - Reduction in Fossil Fuel Peer Review','btype': 'Universities' },{ 'nj_ref': 5939,'nj_numb': 9346,'nj_name': 'Patchetts - Stroke Rehabilitation Centre','btype': 'Health' }
      ]
    }
    let applyFilter = jest.fn()
    wrapper.setMethods({ applyFilter: applyFilter })
    wrapper.setData({ result: result })
    expect(wrapper.isVueInstance).toBeTruthy()
  })

  it('should render Bids component when loaded',() => {
    expect(wrapper.is(Bids)).toBe(true)
  })
})

运行测试时,会引发以下错误

  

[Vue警告]:创建的挂钩中出现错误(承诺/异步):“ TypeError:无法读取未定义的属性“出价””

从本质上说,applyFilter中的created没有返回。我尝试同时提供模拟功能和/或模拟数据,但测试不断返回该错误。

任何想法为什么会这样?

sunicon 回答:如何测试在其创建的挂钩内使用存储操作的组件

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3034334.html

大家都在问