5

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()マウントで呼び出されているという事実がそれをつまずかせているという事実です。

4

2 に答える 2

1

テスト用のローカル Vue を作成し、Vuex プラグインをインストールする必要があります。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'

const localVue = createLocalVue()

localVue.use(Vuex)

const wrapper = shallowMount(...)

于 2019-01-10T20:36:06.190 に答える