在使用vue-cli创建项目的时候&＃xff0c;会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架&＃xff0c;那么我们就动手去学习实践一下他们吧。
简介
Karma
Karma是一个基于Node.js的Javascript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。
换句话说&＃xff0c;它是一个测试工具&＃xff0c;能让你的代码在浏览器环境下测试。需要它的原因在于&＃xff0c;你的代码可能是设计在浏览器端执行的&＃xff0c;在node环境下测试可能有些bug暴露不出来&＃xff1b;另外&＃xff0c;浏览器有兼容问题&＃xff0c;karma提供了手段让你的代码自动在多个浏览器(chrome&＃xff0c;firefox&＃xff0c;ie等)环境下运行。如果你的代码只会运行在node端&＃xff0c;那么你不需要用karma。
Mocha
Mocha是一个测试框架&＃xff0c;在vue-cli中配合chai断言库实现单元测试。
而Chai断言库可以看Chai.js断言库API中文文档&＃xff0c;很简单&＃xff0c;多查多用就能很快掌握。
我对测试框架的理解
npm run unit 执行过程
执行 npm run unit 命令
开启Karma运行环境
使用Mocha去逐个测试用Chai断言写的测试用例
在终端显示测试结果
如果测试成功&＃xff0c;karma-coverage 会在 ./test/unit/coverage 文件夹中生成测试覆盖率结果的网页。
Karma
对于Karma&＃xff0c;我只是了解了一下它的配置选项。
下面是Vue的karma配置&＃xff0c;简单注释了下&＃xff1a;
var webpackConfig &＃61; require(&＃39;../../build/webpack.test.conf&＃39;)
module.exports &＃61; function (config) {
config.set({
// 浏览器
browsers: [&＃39;PhantomJS&＃39;],
// 测试框架
frameworks: [&＃39;mocha&＃39;, &＃39;sinon-chai&＃39;, &＃39;phantomjs-shim&＃39;],
// 测试报告
reporters: [&＃39;spec&＃39;, &＃39;coverage&＃39;],
// 测试入口文件
files: [&＃39;./index.js&＃39;],
// 预处理器 karma-webpack
preprocessors: {
&＃39;./index.js&＃39;: [&＃39;webpack&＃39;, &＃39;sourcemap&＃39;]
},
// Webpack配置
webpack: webpackConfig,
// Webpack中间件
webpackMiddleware: {
noInfo: true
},
// 测试覆盖率报告
// https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md
coverageReporter: {
dir: &＃39;./coverage&＃39;,
reporters: [
{ type: &＃39;lcov&＃39;, subdir: &＃39;.&＃39; },
{ type: &＃39;text-summary&＃39; }
]
}
})
}
Mocha和chai
我们看下官方的例子(都用注释来解释代码意思了)&＃xff1a;
import Vue from &＃39;vue&＃39; // 导入Vue用于生成Vue实例
import Hello from &＃39;&＃64;/components/Hello&＃39; // 导入组件
// 测试脚本里面应该包括一个或多个describe块&＃xff0c;称为测试套件(test suite)
describe(&＃39;Hello.vue&＃39;, () &＃61;> {
// 每个describe块应该包括一个或多个it块&＃xff0c;称为测试用例(test case)
it(&＃39;should render correct contents&＃39;, () &＃61;> {
const Constructor &＃61; Vue.extend(Hello) // 获得Hello组件实例
const vm &＃61; new Constructor().$mount() // 将组件挂在到DOM上
//断言&＃xff1a;DOM中class为hello的元素中的h1元素的文本内容为Welcome to Your Vue.js App
expect(vm.$el.querySelector(&＃39;.hello h1&＃39;).textContent)
.to.equal(&＃39;Welcome to Your Vue.js App&＃39;)
})
})
需要知道的知识点&＃xff1a;
测试脚本都要放在 test/unit/specs/ 目录下。
脚本命名方式为 [组件名].spec.js。
所谓断言&＃xff0c;就是对组件做一些操作&＃xff0c;并预言产生的结果。如果测试结果与断言相同则测试通过。
单元测试默认测试 src 目录下除了 main.js 之外的所有文件&＃xff0c;可在 test/unit/index.js 文件中修改。
Chai断言库中&＃xff0c;to be been is that which and has have with at of same 这些语言链是没有意义的&＃xff0c;只是便于理解而已。
测试脚本由多个 descibe 组成&＃xff0c;每个 describe 由多个 it 组成。
了解异步测试
it(&＃39;异步请求应该返回一个对象&＃39;, done &＃61;> {
request
.get(&＃39;https://api.github.com&＃39;)
.end(function(err, res){
expect(res).to.be.an(&＃39;object&＃39;);
done();
});
});
了解一下 describe 的钩子(生命周期)
describe(&＃39;hooks&＃39;, function() {
before(function() {
// 在本区块的所有测试用例之前执行
});
after(function() {
// 在本区块的所有测试用例之后执行
});
beforeEach(function() {
// 在本区块的每个测试用例之前执行
});
afterEach(function() {
// 在本区块的每个测试用例之后执行
});
// test cases
});
实践
上面简单介绍了单元测试的用法&＃xff0c;下面来动手在Vue中进行单元测试&＃xff01;
util.js
从Vue官方的demo可以看出&＃xff0c;对于Vue的单元测试我们需要将组件实例化为一个Vue实例&＃xff0c;有时还需要挂载到DOM上。
const Constructor &＃61; Vue.extend(Hello) // 获得Hello组件实例
const vm &＃61; new Constructor().$mount() // 将组件挂载到DOM上
以上写法只是简单的获取组件&＃xff0c;有时候我们需要传递props属性、自定义方法等&＃xff0c;还有可能我们需要用到第三方UI框架。所以以上写法非常麻烦。
这里推荐Element的单元测试工具脚本Util.js&＃xff0c;它封装了Vue单元测试中常用的方法。下面demo也是根据该 Util.js来写的。
这里简单注释了下各方法的用途。
/**
* 回收 vm&＃xff0c;一般在每个测试脚本测试完成后执行回收vm。
* &＃64;param {Object} vm
*/
exports.destroyVM &＃61; function (vm) {}
/**
* 创建一个 Vue 的实例对象
* &＃64;param {Object|String} Compo - 组件配置&＃xff0c;可直接传 template
* &＃64;param {Boolean&＃61;false} mounted - 是否添加到 DOM 上
* &＃64;return {Object} vm
*/
exports.createVue &＃61; function (Compo, mounted &＃61; false) {}
/**
* 创建一个测试组件实例
* &＃64;param {Object} Compo - 组件对象
* &＃64;param {Object} propsData - props 数据
* &＃64;param {Boolean&＃61;false} mounted - 是否添加到 DOM 上
* &＃64;return {Object} vm
*/
exports.createTest &＃61; function (Compo, propsData &＃61; {}, mounted &＃61; false) {}
/**
* 触发一个事件
* 注&＃xff1a; 一般在触发事件后使用 vm.$nextTick 方法确定事件触发完成。
* mouseenter, mouseleave, mouseover, keyup, change, click 等
* &＃64;param {Element} elm - 元素
* &＃64;param {String} name - 事件名称
* &＃64;param {*} opts - 配置项
*/
exports.triggerEvent &＃61; function (elm, name, ...opts) {}
/**
* 触发 “mouseup” 和 “mousedown” 事件&＃xff0c;既触发点击事件。
* &＃64;param {Element} elm - 元素
* &＃64;param {*} opts - 配置选项
*/
exports.triggerClick &＃61; function (elm, ...opts) {}
示例一
示例一中我们测试了 Hello 组件的各种元素的数据&＃xff0c;学习 util.js 的 destroyVM 和 createTest 方法的用法以及如何获取目标元素进行测试。获取DOM元素的方式可查看DOM 对象教程。
Hello.vue
{{ msg }}{{ content }}
export default {
name: &＃39;hello&＃39;,
props: {
content: String
},
data () {
return {
msg: &＃39;Welcome!&＃39;
}
}
}
Hello.spec.js
import { destroyVM, createTest } from &＃39;../util&＃39;
import Hello from &＃39;&＃64;/components/Hello&＃39;
describe(&＃39;Hello.vue&＃39;, () &＃61;> {
let vm
afterEach(() &＃61;> {
destroyVM(vm)
})
it(&＃39;测试获取元素内容&＃39;, () &＃61;> {
vm &＃61; createTest(Hello, { content: &＃39;Hello World&＃39; }, true)
expect(vm.$el.querySelector(&＃39;.hello h1&＃39;).textContent).to.equal(&＃39;Welcome!&＃39;)
expect(vm.$el.querySelector(&＃39;.hello h2&＃39;).textContent).to.have.be.equal(&＃39;Hello World&＃39;)
})
it(&＃39;测试获取Vue对象中数据&＃39;, () &＃61;> {
vm &＃61; createTest(Hello, { content: &＃39;Hello World&＃39; }, true)
expect(vm.msg).to.equal(&＃39;Welcome!&＃39;)
// Chai的语言链是无意义的&＃xff0c;可以随便写。如下&＃xff1a;
expect(vm.content).which.have.to.be.that.equal(&＃39;Hello World&＃39;)
})
it(&＃39;测试获取DOM中是否存在某个class&＃39;, () &＃61;> {
vm &＃61; createTest(Hello, { content: &＃39;Hello World&＃39; }, true)
expect(vm.$el.classList.contains(&＃39;hello&＃39;)).to.be.true
const title &＃61; vm.$el.querySelector(&＃39;.hello h1&＃39;)
expect(title.classList.contains(&＃39;hello-title&＃39;)).to.be.true
const content &＃61; vm.$el.querySelector(&＃39;.hello-content&＃39;)
expect(content.classList.contains(&＃39;hello-content&＃39;)).to.be.true
})
})
输出结果
Hello.vue
√ 测试获取元素内容
√ 测试获取Vue对象中数据
√ 测试获取DOM中是否存在某个class
示例二
示例二中我们使用 createTest 创建测试组件测试点击事件&＃xff0c;用 createVue 创建Vue示例对象测试组件 Click 的使用。这里主要可以看下到 createVue 方法的使用。
Click.vue
初始值为{{ InitNum }}
点击了{{ ClickNum }}次
最终结果为{{ ResultNum }}
累加{{ AddNum }}
export default {
name: &＃39;Click&＃39;,
props: {
AddNum: {
type: Number,
default: 1
},
InitNum: {
type: Number,
default: 1
}
},
data () {
return {
ClickNum: 0,
ResultNum: 0
}
},
mounted () {
this.ResultNum &＃61; this.InitNum
},
methods: {
add () {
this.ResultNum &＃43;&＃61; this.AddNum
this.ClickNum&＃43;&＃43;
this.$emit(&＃39;result&＃39;, {
ClickNum: this.ClickNum,
ResultNum: this.ResultNum
})
}
}
}
Click.spec.js
import { destroyVM, createTest, createVue } from &＃39;../util&＃39;
import Click from &＃39;&＃64;/components/Click&＃39;
describe(&＃39;click.vue&＃39;, () &＃61;> {
let vm
afterEach(() &＃61;> {
destroyVM(vm)
})
it(&＃39;测试按钮点击事件&＃39;, () &＃61;> {
vm &＃61; createTest(Click, {
AddNum: 10,
InitNum: 11
}, true)
let buttonElm &＃61; vm.$el.querySelector(&＃39;button&＃39;)
buttonElm.click()
buttonElm.click()
buttonElm.click()
// setTimeout 的原因
// 在数据改变之后&＃xff0c;界面的变化会有一定延时。不用timeout有时候会发现界面没有变化
setTimeout(done &＃61;> {
expect(vm.ResultNum).to.equal(41)
expect(vm.$el.querySelector(&＃39;.init-num&＃39;).textContent).to.equal(&＃39;初始值为11&＃39;)
expect(vm.$el.querySelector(&＃39;.click-num&＃39;).textContent).to.equal(&＃39;点击了3次&＃39;)
expect(vm.$el.querySelector(&＃39;.result-num&＃39;).textContent).to.equal(&＃39;最终结果为41&＃39;)
done()
}, 100)
})
it(&＃39;测试创建Vue对象&＃39;, () &＃61;> {
let result
vm &＃61; createVue({
template: &＃96;
&＃96;,
props: {
AddNum: 10,
InitNum: 11
},
methods: {
handleClick (obj) {
result &＃61; obj
}
},
components: {
Click
}
}, true)
vm.$el.click()
vm.$nextTick(done &＃61;> {
expect(result).to.be.exist
expect(result.ClickNum).to.equal(1)
expect(result.ResultNum).to.be.equal(21)
done()
})
})
输出结果
click.vue
√ 测试按钮点击事件
√ 测试创建Vue对象
其他
所有示例代码都放Github仓库中便于查看。如果想查看更多好的测试用例&＃xff0c;建议配合 Util.js 看一下 Element 的单元测试脚本的写法&＃xff0c;里面有很多测试脚本可以供我们学习。作为被广大Vue用户使用的UI组件库&＃xff0c;测试脚本肯定也写很很不错的~甚至可以将这些脚本照抄一遍&＃xff0c;相信这会对学习Vue组件的单元测试有很大帮助。
下面是本人看Element单元测试的笔记&＃xff0c;供参考。
Util.js 方法包含了大多数Vue组件化的测试需求。
vm.$el vm.$nextTick 和 vm.$ref 都是在测试过程中比较常用的一些Vue语法糖。
需要注意&＃xff1a; vm.$nextTick 方法是异步的&＃xff0c;所以需要在里面使用done方法。
异步断言&＃xff0c;方法参数需要是 _ 或者 done
大多数时候查询元素通过 querySelector 方法查询class获得
vm.$el.querySelector(&＃39;.el-breadcrumb&＃39;).innerText
大多数情况下查询是否存在某个Class通过 classList.contains 方法获得&＃xff0c;查找的结果为 true 或 false
vm.$el .classList.contains(&＃39;el-button--primary&＃39;)
异步测试必须以 done() 方法结尾。setTimeout 和 vm.$nextTick 是常用的异步测试。
实现按钮点击&＃xff1a;通过获取按钮元素 btn&＃xff0c;执行 btn.click() 方法实现。
由于 Vue 进行异步更新DOM的情况&＃xff0c;一些依赖DOM更新结果的断言必须在 Vue.nextTick 回调中进行。
triggerEvent(vm.$refs.cascader.$el, &＃39;mouseenter&＃39;);
vm.$nextTick(_ &＃61;> {
vm.$refs.cascader.$el.querySelector(&＃39;.el-cascader__clearIcon&＃39;).click();
vm.$nextTick(_ &＃61;> {
expect(vm.selectedOptions.length).to.be.equal(0);
done();
});
});
以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。
京公网安备 11010802041100号