标签：失败 parser 完成 find 单元 表示 new tdd 简单
官网：https://vue-test-utils.vuejs.org/zh
定义：
单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。
指令：
package.json文件
测试驱动开发（TDD：Test-Driven Development）
测试框架 mocha
Mocha官网：https://mochajs.org/
使用expect断言语句
chia官网：https://www.chaijs.com/
chia部分方法文档：https://www.chaijs.com/api/assert/
是JavaScript的一种单元测试框架。
mocha的特点主要有：
既可以测试简单的JavaScript函数，又可以测试异步代码，因为异步是JavaScript的特性之一；
可以自动运行所有测试，也可以只运行特定的测试；
可以支持before、after、beforeEach和afterEach来编写初始化代码。
参考
断言库 jest
格式模板
describe 套件
describe('名称',()=>{
<!-- 用例 -->
it('方法描述',()=>{
/* 使用expect 断言语句 */
/* 方法举例 */
expcect(/* 需要检测的方法 */).to.be.equal(/* 检测结果 */)
})
})描述
it()
测试异步代码 通过将回调（通常称为done）添加到it()
.to.be.equal 是否相等
.to.be.deep.equal 是否严格相等tests\unit\parser.spec.ts
测试各类断言语句执行成功或者失败
/* 编写测试用例 */
import {parser,stringify} from '@/code/parser';
/* 使用mocha(测试工具) +chai(断言库) */
import { expect } from 'chai';
/* 套件 */
describe('mytest1', () => {
/* 用例 */
// 常见的关系 相等 大于/小于 包含和不包含
it('测试parser方法是否可用',()=>{
// deep.equal 表示两个对象是否完全相等（引用空间无所谓）
// .to.be.equal 表示两个对象相等（引用空间无所谓）
expect(parser('name=zfpx')).to.be.deep.equal({name:'zfpx'})
})
it('测试stringify方法是否可用',()=>{
expect(stringify({name:'3px'})).to.be.equal('name=3px')
})
})
/* 断言语句各类 */
describe('测试方法',()=>{
it('相等关系',()=>{
expect(1+1).to.be.equal(2);//相加的值
expect([1,2,3]).to.be.lengthOf(3);//长度
expect(true).to.be.true;//布尔值
})
it('包含',()=>{
expect('zfpx').to.be.contain('zf');//是否包含指定字符
expect('zfpx').to.be.match(/zf/);//是否匹配正则
})
it('大于，小于',()=>{
expect(5).to.be.greaterThan(3)
expect(3).to.be.lessThan(6)
expect(3).to.be.not.greaterThan(5)//不大于3
})
})
测试模块是否正确渲染值
src\components\unittest\demo1.vue
<!-- 单元测试：是否能成功显示渲染的组件元素 -->
<template>
<div class="demo1">
<h1>{{ datas }}</h1>
</div>
</template>
<script>
export default {
name:'demo1',
props:['datas'],
data () {
return {
};
}
}
</script>
<style lang='less' scoped>
</style>
tests\unit\unit1.spec.ts
import unitdemo1 from '@/components/unittest/demo1.vue';
import Vue from 'vue';
import {expect} from 'chai';
import {mount} from '@vue/test-utils';
/* 写法1 产地属性后能否正常显示结果*/
describe('unitdemo1',()=>{
it('1.传递属性后能否正常显示结果',()=>{
// 原生自己测试vue
// extend 方法可以根据实例创建一个类
let Constructor = Vue.extend(unitdemo1);
// 对组件进行挂载
// vm.$el mocha 测试的时候集成了 jsdom
let vm:any = new Constructor({
propsData:{datas:'hello'}
}).$mount();
/* 检测h1标签内是否包含hello */
expect(vm.$el.querySelector('h1').innerHTML).to.be.contain('hello');
})
})
/* 写法2 使用mount */
describe('unitdemo1',()=>{
it('2.传递属性后能否正常显示结果',()=>{
let wrapper = mount(unitdemo1);
/* 设置 Wrapper vm 的 prop 并强制更新。
https://vue-test-utils.vuejs.org/zh/api/wrapper/setProps.html
*/
wrapper.setProps({datas:'hello'});//设定传递的值为hello
expect(wrapper.find('h1').text()).to.be.contain('hello');
})
})测试模块内的加法是否执行
src\components\unittest\demo2.vue
<!-- -->
<template>
<div>
<span id="count">{{count}}</span>
<button @click = "increment">+</button>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
count:10
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
increment(){
this.count++
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='lesss' scoped>
/* //@import url(); 引入公共css类 */
</style>tests\unit\unit2.spec.ts
import unitdemo2 from '@/components/unittest/demo2.vue';
import Vue from 'vue';
import {expect} from 'chai';
import {mount} from '@vue/test-utils';
/* 写法2 使用mount */
describe('测试demo2组件',()=>{
it('单机能否+1',()=>{
let wrapper = mount(unitdemo2);
expect(wrapper.find('#count').text()).to.be.equal('10');
wrapper.find('button').trigger('click');
expect(wrapper.find('#count').text()).to.be.equal('11');
})
})测试代码执行：npm run test:unit
测试结果
DONE Compiled successfully in 3577ms
[=========================] 100% (completed)
WEBPACK Compiled successfully in 3577ms
MOCHA Testing...
{ name: 'zfpx' }
name=zfpx
mytest1
√ 测试parser方法是否可用
√ 测试stringify方法是否可用
测试方法
√ 相等关系
√ 包含
√ 大于，小于
unitdemo1
√ 1.传递属性后能否正常显示结果
unitdemo1
√ 2.传递属性后能否正常显示结果
测试demo2组件
√ 单机能否+1
8 passing (111ms)
MOCHA Tests completed successfully标签：失败 parser 完成 find 单元 表示 new tdd 简单
原文地址：https://www.cnblogs.com/NB-JDzhou/p/11772497.html
