我一直在尝试对 Vue 组件进行单元测试,但我似乎无法完全弄清楚如何模拟/存根存储调用 API 异步的对象和方法。
这是我们拥有的 Vue 组件的示例:
import { mapState, mapGetters } from 'vuex'
import router from 'components/admin/router'
export default {
name: 'Users',
computed: {
...mapState('admin', [
'users',
]),
...mapGetters({
requestInProgress: 'requestInProgress',
}),
},
data: function() {
return {
filterTerm: '',
usersLoaded: false,
}
},
methods: {
getUsers(filter) {
this.$store.dispatch('admin/getUserList', filter)
.then(res => {
this.usersLoaded = true
})
.catch(e => {
this.$toast.error({
title: 'Failed to retrieve data',
message: this.$options.filters.normaliseError(e),
})
})
},
},
mounted() {
this.getUsers('*')
},
}
这就是我要写的测试。如果不实际尝试断言任何内容,我什至无法让测试干净地运行
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import Users from 'components/admin/pages/user/users.vue'
describe('Users Vue', () => {
it('Page Should Load', () => {
const mockResponse = {
data: [{
"id": "1",
"emailAddress": "beakersoft@gmail.com",
"firstName": "Luke",
"lastName": "Niland",
"staffNumber": "12345",
"phoneNumber": "07707 999999",
"active": true
}
]};
let actions
let store
beforeEach(() => {
actions = {
'admin/getUserList': sinon.stub()
.returns(Promise.resolve(mockResponse))
}
store = new Vuex.Store({
state: {},
actions
})
})
const wrapper = shallowMount(Users, { store })
const h5 = wrapper.find('h5')
expect(h5.text()).toBe('User Administration')
})
})
我倾向于返回的错误是关于未定义的项目,通常在这种情况下$store.dispatch
是undefined
. 我觉得我在某处的嘲笑中遗漏了一些东西,或者getUsers()
被召唤到坐骑上的事实正在绊倒它。