一、定义
Mocha：定义JavaScript测试模块的测试框架。作用是：配合chai断言库，运行测试脚本进行单元测试。
一个测试脚本包含一个或多个describe(测试模块), 每个describe(测试模块)包括一个或多个it(测试用例)。同时，describe测试模块是一个函数, 具有两个参数，其中第一个参数是测试模块的名称(一般情况下写测试组件的名称), 第二个参数是一个实际执行的函数；it测试用例也是一个函数, 第一个参数是测试用例的名称(通常写你的断言结果,), 第二个参数是一个实际执行的函数。
Chai：断言库，所谓断言, 就是判断源码的实际执行结果与预期结果是否一致, 如果不一致, 就会抛出错误。它具有两种风格分别是TDD和BDD。
TDD风格:：先编写单元测试用例代码，在开发功能代码。它的断言方式有：assert。
BDD风格：先编写开发功能代码，在编写单元测试。它的断言方式有：expect和should。
其中，expect使用构造函数来创建断言对象实例，而should是要新增方法来实现断言（所以should不支持IE）；expect直接指向chai.expect，而should则是chai.should()。个人建议使用expect，兼容性高。
Vue-test-utils：是Vue.js官方的单元测试实用工具库, 提供很多便捷的接口, 比如挂载组件, 设置Props, 发送emit事件等操作。
二、安装
image.png
创建vue项目的时候将Uint Testing选中，生成的项目就是自动集成，也可以自己安装相关依赖然后使用
三、API
1、Mocha：
describe块称为"测试套件"(test suite), 表示一组相关的测试. 它是一个函数, 第一个参数是测试套件的名称(通常写测试组件的名称, 这里即为Counter.js), 第二个参数是一个实际执行的函数.
it块称为"测试用例"(test case), 表示一个单独的测试, 是测试的最小单位. 它也是一个函数, 第一个参数是测试用例的名称(通常描述你的断言结果, 这里即为"点击按钮后, count的值应该为1"), 第二个参数是一个实际执行的函数.
Mocha在describe块中提供了四个钩子: before(), after(), beforeEach(), afterEach(). 它们会在以下时间执行
image.png
常用的方法：
- Slow（Number）：设置时间。当运行时间超过Number,会被标红。
- Timeout（Number）：设置测试用例的最大超时时间。如果执行时间超过了最大超时时间，测试结果将为错误。
- Retries（Number）：设置测试失败后, 测试重试的次数
2、Chai：
常用的属性：
- .not：对之后的断言取反
- .a/an：判断被测试的值的类型
- .Above（value）:判断断言目标的值是否大于（超过）value
- .least（value）:判断断言目标的值不小于（大于或等于）value
- .below（value）:判断断言目标的值是否小于value
- .most（value）：判断断言目标的值不大于（小于或等于）value
- .Within(start, finish)：断言目标的值在某个区间内
- .equal(value)：判断断言目标的值是否完全等于 value
3、Vue-test-utils：
常用的属性：
- vm：访问挂载好的vue组件中的方法和属性。
常用的方法： - mount()：挂载当前组件实例；
- shallowMount()：挂载当前组件实例和可以挂载子组件；
- find()：返回匹配的选择器，可以使用任何有效的选择器。
- Trigger()：监听触发事件
- setData()：设置data的属性并强制更新它的值
- Text()：返回实例对象中的文本内容
- Html()：返回实例对象中DOM 节点的 HTML 字符串
四、实例
chai的一些语法使用
image.png
mocha Demo
image.png
第一个用例获取组件里面的文字，判断文字里面是否包含msg
第二个用例使用不同数字计算1000次，输出计算时间，可测试性能
结果：
image.png
加入把第二个测试用例的对比数字改成1000，结果：
image.png
就会出现断言抛错，可以看到对错结果的对比及所在文件位置
网友评论