在测试中模拟存储获取器时出现问题(我使用vuenit)。我要编写一个代码,该代码可通过模拟存储(模拟状态和吸气剂)安装组件:
let vm
let $store
let mount
beforeEach(function(){
$store=mockStore({
requests: {
state: {
all: 9001,
serviceManagerRequests:228
},
getters: {
getServiceManagerRequestsCount: function(){
return jest.fn().mockImplementation(function(){
return 228
})
},
getAllRequestsCount: function(){
return jest.fn().mockImplementation(function(){
return 9001
})
},
isServiceManager: function(){
return jest.fn().mockImplementation(function(){
return true
})
}
}
},
})
mount=build(AccountSideMenu, {
inject:$store,
router:true
})
vm=mount()
});
AccountSideMenu是一个组件,它使用Vuex存储。 吸气剂在商店代码中定义:
getServiceManagerRequests: state => () => state.serviceManagerRequests,
getServiceManagerRequestsCount: state => () =>state.serviceManagerRequests.length
在组件上,我有吸气剂,在Nuxt模板中定义(有其中之一的示例)。如您所见,它直接在模板上使用getter:
<ul class="uk-nav uk-nav-default" uk-nav >
<!-- v-if="isServiceManager" -->
<li class="uk-nav-header">Management menu</li>
<li><nuxt-link to="/account/requests-manager"><span uk-icon="icon: list" class="uk-margin-small-right uk-icon"></span>Customer requests <span class="uk-badge">{{getServiceManagerRequestsCount()}}</span></nuxt-link></li>
<li class="uk-nav-divider"></li>
</ul>
运行测试代码时,我得到:
console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"
found in
---> <TestComponent454>
<Root>
console.error node_modules\vue\dist\vue.runtime.common.js:1739
TypeError: Cannot read property 'getters' of undefined
at VueComponent.mappedGetter (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vuex\dist\vuex.common.js:850:73)
at Watcher.get (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3140:25)
at Watcher.evaluate (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3247:21)
at Proxy.computedGetter (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3505:17)
at Proxy.render (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\components\AccountSideMenu.vue:112:539)
at VueComponent.Vue._render (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:4542:22)
at VueComponent.updateComponent (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:2786:21)
at Watcher.get (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3140:25)
at new Watcher (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3129:12)
at mountComponent (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:2793:3)
at VueComponent.Object.<anonymous>.Vue.$mount (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:7997:10)
at init (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:4135:13)
at createComponent (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:5606:9)
at createElm (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:5553:9)
at createChildren (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:5680:9)
at createElm (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:5582:9)
at VueComponent.patch [as __patch__] (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:6089:7)
at VueComponent.Vue._update (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:2658:19)
at VueComponent.updateComponent (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:2786:10)
at Watcher.get (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3140:25)
at new Watcher (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:3129:12)
at mountComponent (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:2793:3)
at VueComponent.Object.<anonymous>.Vue.$mount (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vue\dist\vue.runtime.common.js:7997:10)
at Object.<anonymous>.exports.instantiate (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vuenit\lib\component\component.js:207:12)
at Object.<anonymous>.module.exports (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vuenit\lib\component\index.js:38:29)
at mount (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\vuenit\lib\component\build.js:14:12)
at Object.<anonymous> (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\test\specs\components\AccountSideMenu.spec.js:48:14)
at Object.asyncFn (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\jest-jasmine2\build\jasmine_async.js:51:37)
at resolve (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\jest-jasmine2\build\queue_runner.js:52:12)
at new Promise (<anonymous>)
at mapper (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\jest-jasmine2\build\queue_runner.js:39:19)
at promise.then (C:\PROJECTS\K5_INNOVATION\k5-innovation-project-frontend\hit-frontend\node_modules\jest-jasmine2\build\queue_runner.js:73:82)
at <anonymous>
如何模拟吸气剂以将其显示在组件上(如何将吸气剂直接注入组件中?)?