前端自动化测试（四）

在Vue项目中测试组件时会引用全局组件，那么如何处理这些全局组件呢？ 还有Vue中比较重要的一个点就是Vuex如何进行测试？

1.测试时使用VueRouter

1.1 存根

在你的组件中引用了全局组件 router-link 或者 router-view组件时，咱们使用shallowMount来渲染时会提示没法找到这两个组件，咱们能够使用存根的方式mock掉相关的组件。

<template>
    <div>
        <h1>当前路由:{{this.$route.path}}</h1>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于页面</router-link>

        <router-view></router-view>
    </div>
</template>

import Nav from "@/components/Nav.vue";
import { shallowMount } from "@vue/test-utils";
it("测试Nav组件", () => {
  let wrapper = shallowMount(Nav,{
      // 忽略这两个组件
      stubs:['router-link','router-view'],
      mocks:{ // mock一些数据传入到Nav组件中
        $route:{path:'/'}
      }
  });
  expect(wrapper.find('h1').text()).toContain('/')
});

同理：咱们能够 mock掉一些全局组件，也能够 mock一些参数传入到组件中。

1.2 安装VueRouter

咱们能够也建立一个localVue来安装VueRouter,传入到组件中进行渲染。

安装 Vue Router 以后 Vue 的原型上会增长 $route 和 $router 这两个只读属性。因此不要挂载到基本的Vue构造函数上，同时也不能经过mocks参数重写这两个属性

const localVue = createLocalVue();
localVue.use(VueRouter);

it("测试Nav组件", () => {
    let router = new VueRouter({
        routes:[
          {path:'/',component:Home},
          {path:'/about',component:About}
        ]
    });
    let wrapper = mount(Nav,{
        localVue,
        router
    });
    router.push('/about');
    expect(wrapper.find('h1').text()).toMatch(/about/)
});

2.Vuex的测试

咱们经过一个计数器的例子来掌握如何测试vuex。

<template>
    <div>
        {{this.$store.state.number}}
        <button @click="add(3)">添加</button>
    </div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
    methods:{
        ...mapActions({'add':'increment'})
    }
}
</script>

编写store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import config from './config'
Vue.use(Vuex)
export default new Vuex.Store(config)

编写store/mutations.js

export default {
    increment(state,count){
        state.number+=count
    }
}

编写store/actions.js

export default {
  increment({ commit }, count) {
    setTimeout(() => {
      commit("increment", count);
    }, 1000);
  }
};

编写store/config.js

import mutations from "./mutations";
import actions from "./actions";
export default {
  state: {
    number: 0
  },
  mutations,
  actions
};

这里咱们就不过多详细讲解vuex的执行过程了，直接开始测试啦！

2.1 单元化测试store

咱们能够直接把store中的方法一一进行单元测试。

就是逐个测试函数，可是须要用mock来 commit和dispatch方法。

import mutations from '../mutations';
import actions from '../actions';
jest.useFakeTimers();
it('测试mutation',()=>{
    const state = {number:0};
    mutations.increment(state,2);
    expect(state.number).toBe(2);
});

it('测试action',()=>{
    let commit = jest.fn();
    actions.increment({commit},2);
    jest.advanceTimersByTime(2000);
    expect(commit).toBeCalled();
    expect(commit.mock.calls[0][1]).toBe(2);
});

2.2 测试运行的store

就是产生一个store进行测试，好处是不须要mock任何方法。

import Vuex from 'vuex';
import {createLocalVue} from '@vue/test-utils'
import config from '../config';
jest.useFakeTimers();
it('测试是否能够异步增长 1',()=>{
    let localVue = createLocalVue();
    localVue.use(Vuex);
    let store = new Vuex.Store(config); // 建立一个运行store
    expect(store.state.number).toBe(0);
    store.dispatch('increment',2);
    jest.advanceTimersByTime(2000); // 前进2s
    expect(store.state.number).toBe(2);
});

config文件最好每次测试时克隆一份，保证每一个用例间互不干扰！

2.3 测试组件中的Vuex

mock store传入组件中，看函数是否可以如期调用。

import Vuex from 'vuex';
import Counter from '@/components/Counter';
import {createLocalVue,shallowMount} from '@vue/test-utils'

let localVue = createLocalVue();
localVue.use(Vuex);
let store;
let actions;
beforeEach(()=>{
    actions = {
        increment:jest.fn()
    }
    store = new Vuex.Store({
        actions,
        state:{}
    });
});
it('测试组件中点击按钮 是否能够 1',()=>{
    let wrapper = shallowMount(Counter,{
        localVue,
        store
    });
    wrapper.find('button').trigger('click');
    // 测试actions中的increment 方法是否能正常调用
    expect(actions.increment).toBeCalled();
})

到这里 Vuex测试的方式咱们就讲解完毕了，其实前端自动化测试并无想象中的难，你们多多练习就能够彻底掌握啦!

往期回顾：
前端自动化测试（一）
前端自动化测试（二）
前端自动化测试（三）

但愿你们能够关注公众号【前端优选】，有任何想法和意见欢迎讨论交流！连续四天的连载到这里先要告一段落了，祝你们中秋节快乐！