unit-testing - 无法读取未定义的属性“getters” - 带有笑话的 VueJS 单元测试
问题描述
我正在为 VueJS 组件编写单元测试,并查阅了Vue Test Utils Common Tips的“应用全局插件和 Mixins”部分。我有一个依赖于 Vuex 存储的组件,因此我将转置该部分下的示例以用于我的目的是有道理的。
这是该组件的特定 .spec.js 文件的代码:
import { createLocalVue, mount } from '@vue/test-utils'
import AppFooter from '@/components/AppFooter/AppFooter'
import store from '@/store'
describe('AppFooter component', () => {
const localVue = createLocalVue()
localVue.use(store)
it('AppFooter should have header slot', () => {
const AppFooterComponent = mount(AppFooter, {
localVue
})
/* TODO: Replace with a more appropriate assertion */
expect(true).toEqual(true)
})
})
这非常忠实于上面链接中提供的示例。但是,我在运行测试套件时收到的错误如下:
我应该以不同的方式安装 Vue 商店吗?
解决方案
我相信您的组件中有类似 this.$store.getters[someBeautifulGetterName] 的东西。要使您的测试挂载组件,您需要初始化存储并将其传递给您的测试组件。请记住,这将是一个全新的 Vuex 实例。这是代码
import { shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Tags from '@/components/Tags'
Vue.use(Vuex)
Vue.prototype.$store = new Vuex.Store()
const factory = (propsData) => {
return shallowMount(Tags, {
propsData: {
...propsData
}
})
}
describe('Tags', () => {
it("render tags with passed data", () => {
const wrapper = factory({ loading: true })
// TODO:
})
})
推荐阅读
- javascript - 在 Javascript 中执行 ABCD 函数之前,如何等待所有 Promise 完成?
- python-3.x - 如何同时运行计时器和 while 循环(在 Python 3 中使用海龟图形)
- javascript - 如何对通过 Jquery 创建的输入添加验证?
- go - '未能停止 - 进程 1932 已以状态 0 退出'
- python - Django - 有没有办法在循环中优化 ORM ManyToOne 调用?
- c# - C#为泛型函数动态分配类型
- azure-cosmosdb - DocumentClient.Dispose() 上的 LoadBalancingChannel 异常
- javascript - 即使我不使用 `FileTransport`,`winston` 是否具有`fs` 模块依赖性?
- clojure - Clojure-编码标准-用于调用具有许多参数的函数
- python - 如何在轮廓 OpenCV 中找到“区域”?