测试Vue组件-模拟状态和方法

时间:2018-10-01 20:58:10

标签: vue.js vuex vue-test-utils

我一直在努力对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.dispatchundefined。我感觉好像在某处缺少模拟,或者在挂架上调用getUsers()使它崩溃了。

2 个答案:

答案 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构造函数。为此,您必须将其传递给-localVuelocalVue是有作用域的Vue构造函数,您可以在测试范围内对其进行更改,而不会影响应用程序中实际使用的全局Vue构造函数。

此外,在您的特定情况下,您既没有导入也没有安装Vuex。

然后,要正确配置测试,您需要:

  1. 通过调用Vue Test Utils实用程序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)
  1. 更改您的shallowMount函数,并将localVue实例也添加到有效负载中:
 const wrapper = shallowMount(Users, { store, localVue })

请参阅here,以获取正式文档参考。

关于Vue测试的另一个有用资源是this book(有关具体情况,请参见第7章)和its GitHub repository