我一直在努力对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()
使它崩溃了。
答案 0 :(得分:1)
您必须为测试创建本地Vue并安装Vuex插件:
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
const localVue = createLocalVue()
localVue.use(Vuex)
const wrapper = shallowMount(...)
答案 1 :(得分:1)
为了像您在示例中所做的那样测试Vue组件模拟Vue,可以在将store
组件进行操作时将模拟shallowMount
传递给Vue,所以:
shallowMount(Users, { store })
,但是该模拟store
也需要安装到基本Vue构造函数。为此,您必须将其传递给-localVue
。 localVue
是有作用域的Vue构造函数,您可以在测试范围内对其进行更改,而不会影响应用程序中实际使用的全局Vue构造函数。
此外,在您的特定情况下,您既没有导入也没有安装Vuex。
然后,要正确配置测试,您需要:
localVue
函数创建createLocalVue
实例,并在其上安装Vuex: import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
//creating the local Vue instance for testing
const localVue = createLocalVue()
//mounting Vuex to it
localVue.use(Vuex)
shallowMount
函数,并将localVue
实例也添加到有效负载中: const wrapper = shallowMount(Users, { store, localVue })
请参阅here,以获取正式文档参考。
关于Vue测试的另一个有用资源是this book(有关具体情况,请参见第7章)和its GitHub repository