Question

如何对vue.js单文件进行单元测试

Answer 1

可以使用vue-test-utils，vue-test-utils是vue官方的单元测试框架，提供了一系列非常方便的工具，使我们更轻松地为vue构建的应用来编写单元测试。主流的JavaScript测试运行器有很多，但vue-test-utils都能支持。它是测试运行器无关的。具体使用方法可以参照官方手册使用

Answer 2

对vue.js单文件进行测试，可以写一个 test component
然后把你要测的 component 挂到这个 test component 上
然后写一堆 mock，stub 把组件外的东西处理掉（网络请求，socket）
最后写一堆断言就好了

Answer 3

import Vue from 'vue';
import FinalCountdown from 'src/components/workflow/FinalCountdown';
describe('workflow/FinalCountDown component.', () => {
const getComponent = (date) => {
let vm = new Vue({
template: '<div><final-countdown v-ref:component :date="date"></final-countdown></div>',
components: {
FinalCountdown
},
data: {
date
}
});
return vm;
};
...

Answer 4

import Vue from 'vue'
import User from '../../src/view/user/user'
// import {mount} from 'vue-test-utils'
describe('User.vue', () => {
it('点击按钮后, editIndex的值应该为3', () => {
let vm = new Vue(User).$mount()
// 获取button
const button = vm.$el.querySelectorAll('.edit')
// 新建点击事件
const clickEvent = new window.Event('click')
// 触发点击事件
button.dispatchEvent(clickEvent)
// 监听点击事件
vm._watcher.run()
// 断言组件的title是否变为了'Hello world'
expect(vm.editIndex).toEqual(3)
})
})