Vue+Mocha+Vue-test-utils进行单元测试, 如何在测试用例中添加params到router

Question

我使用mocha＋vue-test-utils进行单元测试, 在测试的组件中使用到了this.$route.params.appId．我使用了vue-test-utils提供的createLocalVue和mocks对VueRouter在测试脚本中进行安/装, 因为我不知道如何将appId这个参数在测试脚本中置入到this.$route.params, 所以这时会出现报错, 所有的测试用例都无法执行...
具体代码如下:

//Counter.vue 测试组件

<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 -- 测试脚本

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', () => {
    //测试用例略
})

测试浏览器的报错信息如下:

Answer 1

首先我觉得你先要弄清楚在 vue 组件的单元测试中，你想要什么样的测试数据，想要得到什么样的结果，之后才是怎么注入 vue-router 相关的内容。
比如，你在这里希望在进行单元测试的时候，appId=1；那么你可以这么写：

//伪造Vue-Router
const localVue = createLocalVue();
// 这句话得注释掉，因为你如果选择了 mocks 的方式，就不能安装 VueRouter
// localVue.use(VueRouter);

// $route 是路由信息对象，不是 router vue-router 实例
const $route = {
  path: 'counter/1'
};

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

这样再去测试应该可以解决你的问题。

Answer 2

楼主你好. 我也有个单元测试的问题. 可以咨询一下你是否遇见过这个问题. 组件中有个点击事件 事件中有个异步方法. 在测试用例中触发点击事件 如何能知道异步方法执行完毕了呢 我提的问题的地址