유닛 테스트를 위해 Vuex 게이터를 조롱하면 예기치 않은 결과가 발생함

유닛 테스트를 위해 Vuex 게이터를 조롱하면 예기치 않은 결과가 발생함

VueJS 구성 요소에 대한 단위 테스트를 작성 중이며, Vuex 저장소를 종속성으로 하는 구성 요소를 테스트하기 위한 참조 자료로 이 문서를 사용하고 있다.해당 구성 요소의 관련 부분은 다음과 같다.

<!-- COMPONENT -->

<template>
    <div>
      {{ resources.main.copyIco }} {{ resources.main.rights }} {{ resources.main.read }}
    </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
      computed: {
          ...mapGetters({
              resources: 'resources'
          })
      },
      methods: {
          ...mapActions({
              dispatchAction: 'dispatchAction'
          })
      }
   }
</script>

구성 요소의 테스트 제품군은 다음과 같다.

/* Test suite for component */

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

describe('AppFooter component', () => {   

    it('instantiates the component correctly', () => {
        const localVue = createLocalVue()
        localVue.use(Vuex)
        /* define mock getters */
        const getters = {
            resources: () => 'resources'
        }
        const store = new Vuex.Store({ getters })
        const wrapper = shallowMount(AppFooter, {
            store,
            localVue
        })

        console.log('test suite does not reach this point due to error')
    })
})

이것에 대해 흥미로운 것은 내가 제스트 테스트 스위트를 실행했을 때 오류는 다음과 같이 읽힌다.

나로서는 (구성 요소 템플릿과 맥락을 같이 하는) 것 같아 이상해 보인다.resources.main재산은 분명히 정해져 있지만 그것은 아니다.resources.main.copyIco그렇지 않다.그렇지 않으면resources.main잘 정의되지 않았다. 그것은 사진에 보이는 것 대신에 오류일 것이다.

간단히 말해, 구성 요소와 제품군 둘 다 설정 방법에 따라 이러한 오류가 발생하는 이유는 무엇인가?구성 요소 내에서 mapGetters를 다시 정의해야 하는가?

당신의 예에서 당신의 게터는 단지 이름이 붙은 문자열을 반환하고 있다.resources그리고 그것은 없다.main재산이것은 부에와는 아무 상관이 없다.

resources.main이다undefined그리고 지금 당신의 프로그램은copyIco의 재산.undefined오류는 메시지가 옳다는 것이다.그것은 읽을 수 없다.copyIco의undefined.

이것을 더 잘 조롱하는 한 가지 방법은 그러한 선에 따른 것이다.

const getters = {
    resources: () => ({ main: { copyIco: 'something', rights: 'rights'}})
}

참조URL: https://stackoverflow.com/questions/51487228/mocking-vuex-getters-for-unit-tests-yields-unexpected-result