unit-testing - 为单元测试模拟 Vuex getters 会产生意想不到的结果

Question

我正在为 VueJS 组件编写单元测试并使用 this article作为测试将 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')
    })
})

有趣的是，当我运行 Jest 测试套件时，错误如下:

对我来说，这似乎很奇怪，因为(考虑到组件模板的上下文)，看起来 resources.main 属性定义明确，但 resources.main.copyIco 不是。否则，如果 resources.main 没有明确定义，那将是错误，而不是图片中看到的错误。

简而言之，根据组件和套件的设置方式，为什么会出现此错误？我是否需要在组件内重新定义 mapGetter？

Answer 1

在您的示例中，您的 getter 只是返回一个名为 resources 的字符串，并且没有 main 属性。这与 Vue.js 无关。

resources.main 是 undefined。现在您的程序尝试获取 undefined 的 copyIco 属性。错误是消息是正确的。它无法读取 undefined 的 copyIco。

更好地模拟这一点的一种方法是遵循这些思路。

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