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

熠辉
  • 2.5k

我使用mocha+vue-test-utils进行单元测试, 在测试的组件中使用到了this.$route.params.appId.我使用了vue-test-utils提供的createLocalVuemocks对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', () => {
    //测试用例略
})

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

回复
阅读 2.9k
2 个回答

首先我觉得你先要弄清楚在 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
  }
});

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏