我有一个带有以下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
没有返回。我尝试同时提供模拟功能和/或模拟数据,但测试不断返回该错误。
任何想法为什么会这样?