渲染组件时,vue js getter不是函数

时间:2018-06-21 13:08:58

标签: javascript vue.js vuex nuxt.js

在测试中模拟存储获取器时出现问题(我使用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>

如何模拟吸气剂以将其显示在组件上(如何将吸气剂直接注入组件中?)?

0 个答案:

没有答案