VueJS-无法读取未定义的属性$ router

时间:2018-07-25 16:36:07

标签: unit-testing vue.js vuejs2 jestjs vue-router

我正在对Vue组件进行单元测试,并且正在测试以下action方法:

/* COMPONENT */

methods: {
  action (options) {
    if (options.hook) {
      return new Promise((resolve, reject) => {
         resolve(options.hook())
      })
      .then(function (resolvedHookOptions = {}) {
        const route = resolvedHookOptions.route || options.route
        this.$router.push(route)
      })
      .catch(err => { console.log('TODO: how to handle err', err) })
    } else {
       this.$router.push(options.route)
    }
  }
}

我将Jest用作测试运行程序,并对该组件和基础操作方法进行以下测试:

/* TEST */

import { createLocalVue, shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import ActionRow from '@/components/ActionRow/ActionRow'
import VueRouter from 'vue-router'
....

it('calls the action method with no arguments', () => {

    const localVue = createLocalVue()
    localVue.use(VueRouter)
    const router = new VueRouter()

    const wrapper = shallowMount(ActionRow, {
        localVue,
        router
    })

    /* NOTE: I also call this method with a mock options object 
    for another test but it is omitted for the sake of brevity */
    wrapper.vm.action({})
})

这是返回的错误:

enter image description here

出于好奇的缘故,以下是this日志中的一些摘要,在此之前。$ router.push被调用。我认为该信息不足以进行分析,但是如果有人发现不对劲,请通知我:

VueComponent {
       ...
       _routerRoot: [Circular],
       _router: 
        VueRouter {
          app: [Circular],
          apps: [Array],
          options: {},
          beforeHooks: [],
          resolveHooks: [],
          afterHooks: [],
          matcher: [Object],
          fallback: false,
          mode: 'hash',
          history: [Object] },
       _route: [Getter/Setter],
       __emitted: {},
       __emittedByOrder: [],
       '$emit': [Function],
       _watchers: [ [Object], [Object], [Object] ],
       _props: 
        { backText: [Getter/Setter],
          backAction: [Getter/Setter],
          cancelText: [Getter/Setter],
          cancelAction: [Getter/Setter],
          saveAndExitText: [Getter/Setter],
          saveAndExitAction: [Getter/Setter],
          continueText: [Getter/Setter],
          continueAction: [Getter/Setter],
          showCancel: [Getter/Setter],
          disableContinue: [Getter/Setter] },
       action: [Function: bound action]
     }

0 个答案:

没有答案