Vue 컴포넌트 테스트 - 모의 상태 및 방법

Vue 컴포넌트 테스트 - 모의 상태 및 방법

Vue 컴포넌트를 테스트하는 유닛을 이해하려고 했지만, API 비동기라고 하는 스토어 오브젝트나 메서드를 Mock/Stubout 하는 방법을 잘 이해할 수 없는 것 같습니다.

다음은 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()산에 불려간다는 건 망친 거야

예시와 같이 Vue 컴포넌트를 테스트하려면 모의 테스트를 통과해도 됩니다.storeVue에 대해서shallowMount컴포넌트를 사용할 수 있습니다.그러면 다음과 같습니다.

shallowMount(Users, { store })

하지만 이 조롱은store기본 Vue 컨스트럭터에도 마운트해야 합니다.그러기 위해서는 다음 사람에게 전달해야 합니다.localVue.alocalVue는 어플리케이션에서 실제로 사용되는 글로벌 Vue 컨스트럭터에 영향을 주지 않고 테스트 범위에서 변경할 수 있는 범위 내의 Vue 컨스트럭터입니다.

게다가 특정의 경우는, Vuex 를 Import 또는 인스톨 하지 않았습니다.

그런 다음 테스트를 올바르게 구성하려면 다음을 수행해야 합니다.

1. 을 작성하다localVue인스턴스(Vue Test Utils 유틸리티 호출)createLocalVueVuex 를 기능시켜 인스톨 합니다.

    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)

2. 의 변경shallowMount함수도 추가localVuepayload로의 인스턴스:

 const wrapper = shallowMount(Users, { store, localVue })

공식 문서에 대한 참조는 여기를 참조하십시오.

Vue 테스트에 대한 또 다른 유용한 리소스는 이 책과 GitHub 저장소입니다.

테스트에 사용할 로컬 Vue를 생성하고 Vuex 플러그인을 설치해야 합니다.

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

const localVue = createLocalVue()

localVue.use(Vuex)

const wrapper = shallowMount(...)

언급URL : https://stackoverflow.com/questions/52598812/testing-vue-components-mocking-state-and-methods