Vue.js Vue测试Utils-无法正确装入/浅装入组件，包装器未定义

我已经尝试了几乎所有我能想到的方法，但我无法正确安装/浅装vue组件以进行正确测试。每次I console.log包装器时，我都会得到以下打印输出：

VueWrapper {
  isFunctionalComponent: undefined,
  _emitted: [Object: null prototype] {},
  _emittedByOrder: []
}

此问题与此处提出的问题类似：

我正在使用Vuetify、Vuex和Vue路由器。我的test.spec.ts如下：

import { shallowMount, createLocalVue, mount } from "@vue/test-utils"
import Vuex from "vuex"
import Vuetify from "vuetify"
import VueRouter from "vue-router"
import TheExamAnswer from "@/components/common/TheExamAnswer.vue"

describe("TheExamAnswer.vue", () => {
  const localVue = createLocalVue()
  let getters: any
  let store: any
  let vuetify: any
  let router: any

  beforeEach(() => {
    localVue.use(Vuex)
    localVue.use(Vuetify)
    localVue.use(VueRouter)
    getters = {
      getExam: () => true,
    }

    store = new Vuex.Store({
      modules: {
        // Need to add FlightPlanning for name spacing
        FlightPlanning: {
          namespaced: true,
          getters,
        },
      },
    })

    vuetify = new Vuetify()

    router = new VueRouter()
  })

  it("Renders the element if the exam has been submitted", () => {
    const wrapper = mount(TheExamAnswer, { localVue, store, router })
    console.log("This is the HTML", wrapper.html())
    expect(wrapper.text()).toContain("Show Answer")
  })
})

<template>
  <div v-if="submitted" class="div">
    <v-btn @click="answerHidden = !answerHidden" class="mb-10"
      >Show Answer</v-btn
    >
    <div v-if="!answerHidden">
      <slot name="questionAnswer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      answerHidden: true,
    }
  },
  computed: {
    submitted() {
      const exam = this.$store.getters["FlightPlanning/getExam"]
      return exam.submitted
    },
  },
}
</script>

<style></style>

我的视图组件非常简单，代码如下：

import { shallowMount, createLocalVue, mount } from "@vue/test-utils"
import Vuex from "vuex"
import Vuetify from "vuetify"
import VueRouter from "vue-router"
import TheExamAnswer from "@/components/common/TheExamAnswer.vue"

describe("TheExamAnswer.vue", () => {
  const localVue = createLocalVue()
  let getters: any
  let store: any
  let vuetify: any
  let router: any

  beforeEach(() => {
    localVue.use(Vuex)
    localVue.use(Vuetify)
    localVue.use(VueRouter)
    getters = {
      getExam: () => true,
    }

    store = new Vuex.Store({
      modules: {
        // Need to add FlightPlanning for name spacing
        FlightPlanning: {
          namespaced: true,
          getters,
        },
      },
    })

    vuetify = new Vuetify()

    router = new VueRouter()
  })

  it("Renders the element if the exam has been submitted", () => {
    const wrapper = mount(TheExamAnswer, { localVue, store, router })
    console.log("This is the HTML", wrapper.html())
    expect(wrapper.text()).toContain("Show Answer")
  })
})

<template>
  <div v-if="submitted" class="div">
    <v-btn @click="answerHidden = !answerHidden" class="mb-10"
      >Show Answer</v-btn
    >
    <div v-if="!answerHidden">
      <slot name="questionAnswer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      answerHidden: true,
    }
  },
  computed: {
    submitted() {
      const exam = this.$store.getters["FlightPlanning/getExam"]
      return exam.submitted
    },
  },
}
</script>

<style></style>

正如您所看到的，HTML是空白的，因此我认为这也是测试失败的原因，因为收到的字符串是“”

解决方案-

我想出来了。错误代表了我的利益，因为没有正确查看计算属性的逻辑

在我的测试中，我有：

 getters = {
          getExam: () => true,
        }

在我的组件中，我有：

computed: {
    submitted() {
      const exam = this.$store.getters["FlightPlanning/getExam"]
      return exam.submitted
    },

如果您查看computed属性的逻辑，它将获取从getter返回的内容并将其分配给exam变量。最初我返回true，因为我希望submitted（）函数返回true，这意味着当我调用exam.submitted时，我在一个布尔值上调用它，这个布尔值显然给了我“undefined”。解决方案是返回computed属性设计用来处理的对象，即{submitted:true}

因此，最终测试如下所示，并返回有效的HTML

import { shallowMount, createLocalVue, mount } from "@vue/test-utils"
import Vuex from "vuex"
import Vuetify from "vuetify"
import VueRouter from "vue-router"
import TheExamAnswer from "@/components/common/TheExamAnswer.vue"

const localVue = createLocalVue()

localVue.use(Vuex)
localVue.use(Vuetify)
localVue.use(VueRouter)

describe("test.vue", () => {
  let getters: any
  let store: any
  let vuetify: any
  let router: any

  beforeEach(() => {
    getters = {
      getExam: () => {
        return { submitted: true }
      },
    }

    store = new Vuex.Store({
      modules: {
        // Need to add FlightPlanning for name spacing
        FlightPlanning: {
          namespaced: true,
          getters,
        },
      },
    })

    vuetify = new Vuetify()

    router = new VueRouter()
  })

  it("Renders the element if the exam has been submitted", () => {
    const wrapper = mount(TheExamAnswer, { localVue, vuetify, store, router })
    console.log("This is the HTML", wrapper.html())
  })
})

这给了我以下结果：

  console.log tests/unit/test.spec.ts:44
    This is the HTML <div><button type="button" class="mb-10 v-btn v-btn--contained theme--light v-size--default"><span class="v-btn__content">Show Answer</span></button>
      <!---->
    </div>

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.235s
Ran all test suites.

console.log测试/单元/测试规范ts:44
这是HTML显示的答案
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：5.235s
运行所有测试套件。

带有包装器或元素的奇怪输入的console.log是正常行为。我对你的组件进行了几次测试，一切正常

it（“如果已提交考试，则呈现元素”，（）=>{
const wrapper=mount（TheExamAnswer，{localVue，store，router}）；
expect（wrapper.text（））.toContain（“显示答案”）；
});

如果要在包装器中记录console.log html：

console.log（wrapper.html（））

更新：根组件上返回空字符串的原因是

v-if=“submitted”

。计算出的属性返回未定义的，因为getter返回未定义的，所以提交的

测试规范ts中的Getter

：

getters={
getExam:（）=>{
返回{已提交：true}；
}
};

对不起，巴德，它似乎还没来参加聚会。我已经用最新的错误更新了这个问题。它返回零HTML，这对我来说意味着包装器是空的。问题可能是存储getter。这就是html为空的原因。在一些测试之后，我将用有效的解决方案更新我的示例。我希望我在5分钟前就阅读了这个更新。我刚刚也明白了。我已经把它全部添加到问题中，并将您的标记为正确，因为这是解决方案。非常感谢你的帮助，如果没有“问题可能出在店主身上”的暗示，我仍然会被卡住。