正文
Eslint配置,默认即可:
{
"env": {
"mocha": true
},
"globals": {
"expect": true,
"sinon": true
}
}
好了,接下来我们就可以在specs文件夹中编写自己的测试用例了。
编写测试用例
静态组件
我们先从最简单的组件开始,这种组件只能展示数据,只有在生命周期中数据会变化。
这个组件长这样:
{{ msg }}
export default {
data () {
return {
msg: 'hello world'
}
},
mounted () {
this.msg = 'bye bye'
}
}
我们可以写出这样的测试用例:
/* eslint-disable */
// 测试用例可以绕过eslint检验,不然要烦死你咯
import Vue from 'vue'
import MyComponent from '@components/MyComponent'
describe('MyComponent', () => {
// 检查mounted
it('has a mounted hook', () => {
expect(typeof MyComponent.mounted).to.eql('function')
})
// 组件实例
const Constructor = Vue.extend(MyComponent);
// 检查msg
it('msg should change to bye bye', () => {
expect(myComponent.msg).to.eql('bye bye')
})
// 挂载组件
const myComponent = new Constructor().$mount();
// 检查msg
it('msg should in page', () => {
expect(myComponent.$el.textContent).to.contain('bye bye')
})
})
小技巧
这里有很多同学可能不了解vue实例有哪些属性,这里教给大家一个(调试)小技巧。我们可以使用vue-tools。
首先打开vue-tools,选中一个元素。

然后在控制台查看$vm,是不是很惊喜?可以对$vm的属性直接更改哦,会显示在页面上。

小鲜肉可以在开始的时候测试用例和浏览器并用,平缓的度过过度期。
组件有props
如果组件需要传入props怎么办呢,我们只要在构造函数中传入就可以了。
这个组件长这样:
{{ propMsg }}
export default {
props: ['propMsg']
}
我们可以写出这样的测试用例:
/* eslint-disable */