详解Vue单元测试Karma+Mocha学习笔记

module.exports = function (config) {
config.set({
// 浏览器
browsers: ['PhantomJS'],// 测试框架
frameworks: ['mocha','sinon-chai','phantomjs-shim'],// 测试报告
reporters: ['spec','coverage'],// 测试入口文件
files: ['./index.js'],// 预处理器 karma-webpack
preprocessors: {
'./index.js': ['webpack','sourcemap']
},// Webpack配置
webpack: webpackConfig,// Webpack中间件
webpackMiddleware: {
noInfo: true
},// 测试覆盖率报告
// https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md
coverageReporter: {
dir: './coverage',reporters: [
{ type: 'lcov',subdir: '.' },{ type: 'text-summary' }
]
}
})
}

{ // 每个describe块应该包括一个或多个it块，称为测试用例（test case） it('should render correct contents',() => { const Constructor = Vue.extend(Hello) // 获得Hello组件实例 const vm = new Constructor().$mount() // 将组件挂在到DOM上 //断言：DOM中class为hello的元素中的h1元素的文本内容为Welcome to Your Vue.js App expect(vm.$el.querySelector('.hello h1').textContent) .to.equal('Welcome to Your Vue.js App') }) })

{ request .get('https://api.github.com') .end(function(err,res){ expect(res).to.be.an('object'); done(); }); });

before(function() {
// 在本区块的所有测试用例之前执行
});

after(function() {
// 在本区块的所有测试用例之后执行
});

beforeEach(function() {
// 在本区块的每个测试用例之前执行
});

afterEach(function() {
// 在本区块的每个测试用例之后执行
});

// test cases
});

/**

• 创建一个 Vue 的实例对象
• @param {Object|String} Compo - 组件配置，可直接传 template
• @param {Boolean=false} mounted - 是否添加到 DOM 上
• @return {Object} vm
  */
  exports.createVue = function (Compo,mounted = false) {}

/**

• 创建一个测试组件实例
• @param {Object} Compo - 组件对象
• @param {Object} propsData - props 数据
• @param {Boolean=false} mounted - 是否添加到 DOM 上
• @return {Object} vm
  */
  exports.createTest = function (Compo,propsData = {},mounted = false) {}

/**

• 触发一个事件
• 注： 一般在触发事件后使用 vm.$nextTick 方法确定事件触发完成。
• mouseenter,mouseleave,mouseover,keyup,change,click 等
• @param {Element} elm - 元素
• @param {String} name - 事件名称
• @param {} opts - 配置项
  /
  exports.triggerEvent = function (elm,name,...opts) {}

/**

• 触发 “mouseup” 和 “mousedown” 事件，既触发点击事件。
• @param {Element} elm - 元素
• @param {} opts - 配置选项
  /
  exports.triggerClick = function (elm,...opts) {}

describe('Hello.vue',() => {
let vm

afterEach(() => {
destroyVM(vm)
})

it('测试获取元素内容',() => {
vm = createTest(Hello,{ content: 'Hello World' },true)
expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Welcome!')
expect(vm.$el.querySelector('.hello h2').textContent).to.have.be.equal('Hello World')
})

it('测试获取Vue对象中数据',true)
expect(vm.msg).to.equal('Welcome!')
// Chai的语言链是无意义的，可以随便写。如下：
expect(vm.content).which.have.to.be.that.equal('Hello World')
})

it('测试获取DOM中是否存在某个class',true)
expect(vm.$el.classList.contains('hello')).to.be.true
const title = vm.$el.querySelector('.hello h1')
expect(title.classList.contains('hello-title')).to.be.true
const content = vm.$el.querySelector('.hello-content')
expect(content.classList.contains('hello-content')).to.be.true
})
})

describe('click.vue',() => {
let vm

afterEach(() => {
destroyVM(vm)
})

it('测试按钮点击事件',() => {
vm = createTest(Click,{
AddNum: 10,InitNum: 11
},true)
let buttonElm = vm.$el.querySelector('button')
buttonElm.click()
buttonElm.click()
buttonElm.click()
// setTimeout 的原因
// 在数据改变之后，界面的变化会有一定延时。不用timeout有时候会发现界面没有变化
setTimeout(done => {
expect(vm.ResultNum).to.equal(41)
expect(vm.$el.querySelector('.init-num').textContent).to.equal('初始值为11')
expect(vm.$el.querySelector('.click-num').textContent).to.equal('点击了3次')
expect(vm.$el.querySelector('.result-num').textContent).to.equal('最终结果为41')
done()
},100)
})

it('测试创建Vue对象',() => {
let result
vm = createVue({
template: <click @click="handleClick"&gt;</click> ,props: {
AddNum: 10,InitNum: 11
},methods: {
handleClick (obj) {
result = obj
}
},components: {
Click
}
},true)
vm.$el.click()
vm.$nextTick(done => {
expect(result).to.be.exist
expect(result.ClickNum).to.equal(1)
expect(result.ResultNum).to.be.equal(21)
done()
})
})

{ vm.$refs.cascader.$el.querySelector('.el-cascader__clearIcon').click(); vm.$nextTick(_ => { expect(vm.selectedOptions.length).to.be.equal(0); done(); }); });