基于vue-cli的单元测试案例

CoXie 发布于2019-08-26 17:40 / 2550人阅读

摘要：的单元测试最近项目开发临近结尾，反思之前做的不足的地方，想着应该引入测试类的做法，于是乎开始学习前端测试之类的文档。本次主要提供可使用，可运行的单元测试代码，不足之处，欢迎指出。

vue-cli的单元测试

最近项目开发临近结尾，反思之前做的不足的地方，想着应该引入测试类的做法，于是乎开始学习前端测试之类的文档。因为项目是基于vue-cli的单页面，所以想着在此基础上拓展。

测试框架类型

vue官方提供了几种测试框架 jest,mocha 等这几种测试框架，本次案例采用的是 karma + mocha + chai 这个配套来实现的。而且还是结合了 vue-test-utils 这个官方的测试库。特别说明，在安装vue-cli时在选择测试类型时，通过 上下键 来选择对应的测试框架

具体案例说明

静态文件加载测试

import Vue from "vue"
import Test from "@/components/Test"
import {mount} from "vue-test-utils"

describe("Test.vue",()=>{
    it("页面加载成功",()=>{
        const wrapper = mount(Test);
        expect(wrapper.find("h1").text()).to.equal("My First UnitTest");
    })
})

首页引入要测试的文件以及vue-test-utils提供的方法mount,通过这个方法挂载页面，可以轻松获取页面的Dom元素。describe以及it就是mocha的语法，两者分别接受两个参数。前者是要测试的页面，后者是测试时的提示语，然后都接受一个函数，在it里面的函数则是要断言出你要的结果，即expect()的内容是否等于你想要的结果。

事件操作测试

import Vue from "vue"
import Event from "@/components/Event"
import { mount } from "vue-test-utils"

describe("Event.vue",()=>{
    it("事件方法测试",()=>{
        const wrapper = mount(Event);
        const clickButton = wrapper.find("button");
        clickButton.trigger("click");
        const number = Number(wrapper.find("input").element.value);
        expect(number).to.equal(2);
    })
})

整体格式差不多，主要是就是用到vue-test-utils的trigger方法模拟点击操作

异步操作测试

import Vue from "vue"
import {mount,shallow} from "vue-test-utils"
import AsyncEvent from "@/components/AsyncEvent"

describe("AsyncEvent.vue",()=>{
    it("异步行为测试",(done)=>{
        const wrapper = mount(AsyncEvent);
        wrapper.find("button").trigger("click");
        setTimeout(()=> {
            expect( Number(wrapper.find("span").text()) ).to.equal(2);
            done();
        }, 1000)
    })
})

这里使用setTimeout来做异步测试，注意的是这里要使用 done 这个方法来确定什么时候执行测试结束

VUEX测试

import { shallow, createLocalVue } from "vue-test-utils"
import Vuex from "vuex"
import VuexTest from "@/components/VuexTest"
import myModule from "@/store/index"

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

describe("VuexTest.vue",()=>{
    let getters = myModule.getters;
    let state;
    let store;
    let mutations;

    beforeEach(()=>{
        state = {
            count: 0
        }
        mutations = {
            increment(state) {
                state.count++;
            }
        }
        store = new Vuex.Store({
              modules: {
                state,
                mutations,
                getters,                
              }
        })
    })

    it("Vuex 渲染监测",()=>{
        const wrapper = shallow(VuexTest,{store,localVue});
        const span = wrapper.find("span");
        expect( Number(span.text()) ).to.equal(state.count)
    })

    it("Vuex 事件监测",()=>{
           mutations.increment(state)
          expect(state.count).to.equal(1);
    })
})

在使用vue时当然也要考虑vuex的测试，这是使用createLocalVue方法构造一个局部独立作用于的vue环境，避免影响到全局的Vue环境，而 shallow 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper,不同的是被存根的是子组件，基本和 mount 差不多，但是官方demo 使用的是shallowmount，但是实际测试中就是报错，然后换成了shallow。接着测试里面也要构建一个 vuex 的store仓库，这里还引入了项目里面的store，并将其getters赋值给测试里的getters,这样就可以确保断言的结果是我们项目中设定的。

结语说明

毕竟第一次写单元测试，了解的东西并不深入，具体感兴趣的同学可以好好看看上述的测试框架及文档，这几个库的api可谓丰富。本次主要提供可使用，可运行的单元测试代码，不足之处，欢迎指出。后续会更新其他的测试场景。
git代码地址 https://github.com/1533266567...

参考文章

https://segmentfault.com/a/11...

GPU云服务器云服务器单元测试单元测试规范单元测试图片测试java php单元测试’

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110143.html

搭建自己的前端自动化测试脚手架（一）

摘要：还可以自动完成单元测试的配置，工具选型为准备出发有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见下一篇搭建自己的前端自动化测试脚手架二搭建自己的前端自动化测试脚手架（一） LancerComet at 17:55, 2016.07.17.欢迎转载，转载时还请保留作者署名。随着前端项目规模的日益膨胀，自动化测试越来越受到广大前端与测试朋友关...

luffyZh 2019-05-29 16:57 评论0 收藏0
基于 Node+express 爬虫的数据 API，爬一套自己的api数据(2)

摘要：目前半岛局势紧张，朝鲜已进行了六次核试验，被广泛认为已经拥有了核弹头。另外朝鲜的导弹技术今年以来快速突破，成功试射了射程可覆盖美国本土的洲际弹道导弹。这个版的内容传到互联网上后，迅速刷屏，引起纷纷议论。 SplderApi2 Node-SplderApi2 第二版基于Node 的网络爬虫 API接口包括前端开发日报、kugou音乐、前端top框架排行、妹纸福利、搞笑视频、段子笑话、...

beanlam 2019-08-21 17:57 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

william 2019-08-20 18:28 评论0 收藏0