Vue+Mocha+Vue-test-utils進(jìn)行單元測(cè)試, 如何在測(cè)試用例中添加params到router

我使用mocha＋vue-test-utils進(jìn)行單元測(cè)試, 在測(cè)試的組件中使用到了this.$route.params.appId．我使用了vue-test-utils提供的createLocalVue和mocks對(duì)VueRouter在測(cè)試腳本中進(jìn)行安/裝, 因?yàn)槲也恢廊绾螌?code>appId這個(gè)參數(shù)在測(cè)試腳本中置入到this.$route.params, 所以這時(shí)會(huì)出現(xiàn)報(bào)錯(cuò), 所有的測(cè)試用例都無(wú)法執(zhí)行...
具體代碼如下:

//Counter.vue 測(cè)試組件

<template>
  <div>
    <h3>Counter.vue</h3>
    <div>
      <span class="num">{{ count }}</span>
      <button class="sync-button" @click="increment">自增</button>
      <button class="async-button" @click="incrementByAsync">異步自增</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 0,
        foo: '',
        appid: this.$route.params.appId
      }
    },

    methods: {
      increment () {
        this.count++;
      },
      incrementByAsync () {
        window.setTimeout(() => {
          this.count++;
        }, 1000) 
      }
    }
  }
</script>

//Counter.spec.js -- 測(cè)試腳本

import Vue from 'vue'
import Counter from '@/components/Counter'
import VueRouter from 'vue-router'
import Weibo from '@/components/SinaWeibo.vue'
//引入vue-test-utils
import { mount, shallow, createLocalVue } from 'vue-test-utils'


//偽造Vue-Router
const localVue = createLocalVue();
localVue.use(VueRouter);
const $route = new VueRouter({
  mode: 'history',
  routes: [
    {
      //重定向
      path: '/',
      redirect: '/weibo'
    },
    {
      path: '/weibo',
      component: Weibo
    },
    {
      name: 'counter',
      path: '/counter/:appId',
      component: Counter
    }
  ]
});

let wrapper = mount(Counter, {
  mocks: {
    $route
  }
});

describe('Counter.vue', () => {
    //測(cè)試用例略
})

測(cè)試瀏覽器的報(bào)錯(cuò)信息如下:

回答

編輯回答

孤酒

樓主你好. 我也有個(gè)單元測(cè)試的問(wèn)題. 可以咨詢一下你是否遇見(jiàn)過(guò)這個(gè)問(wèn)題. 組件中有個(gè)點(diǎn)擊事件事件中有個(gè)異步方法. 在測(cè)試用例中觸發(fā)點(diǎn)擊事件如何能知道異步方法執(zhí)行完畢了呢我提的問(wèn)題的地址

2017年5月6日 18:53

編輯回答

局外人

首先我覺(jué)得你先要弄清楚在 vue 組件的單元測(cè)試中，你想要什么樣的測(cè)試數(shù)據(jù)，想要得到什么樣的結(jié)果，之后才是怎么注入 vue-router 相關(guān)的內(nèi)容。
比如，你在這里希望在進(jìn)行單元測(cè)試的時(shí)候，appId=1；那么你可以這么寫(xiě)：

//偽造Vue-Router
const localVue = createLocalVue();
// 這句話得注釋掉，因?yàn)槟闳绻x擇了 mocks 的方式，就不能安裝 VueRouter
// localVue.use(VueRouter);

// $route 是路由信息對(duì)象，不是 router vue-router 實(shí)例
const $route = {
  path: 'counter/1'
};

let wrapper = mount(Counter, {
  mocks: {
    $route
  }
});

這樣再去測(cè)試應(yīng)該可以解決你的問(wèn)題。

2017年6月29日 18:34