JavaScript单元测试利器Jest+mocha+chai

一：mocha介绍

mocha是一款功能丰富的javascript单元测试框架，它既可以运行在nodejs环境中，也可以运行在浏览器环境中。 javascript是一门单线程语言，最显著的特点就是有很多异步执行。同步代码的测试比较简单，直接判断函数的返回值是否符合预期就行了，而异步的函数，就需要测试框架支持回调、promise或其他的方式来判断测试结果的正确性了。mocha可以良好的支持javascript异步的单元测试。 mocha会串行地执行我们编写的测试用例，可以在将未捕获异常指向对应用例的同时，保证输出灵活准确的测试结果报告。

chai 是一个针对 Node.js 和浏览器的行为驱动测试和测试驱动测试的断言库，可与任何 JavaScript 测试框架集成。

istanbul是一个 JavaScript 的代码覆盖率检查库。其有如下特性：

• 可检查包括语句、分支和函数覆盖，以及反向工程的代码行覆盖
• 模块加载钩子 可随时跟踪代码
• 命令行工具 可运行带覆盖率检查的 node 单元测试，不需要对测试运行进行协作
• 可生成 HTML 和 LCOV 报表
• 可作为中间件使用，在浏览器进行测试
• 可在命令行中以库的形式使用

二：JavaScript基础知识

(PS：不入虎穴焉得虎子，先自己搞定JS基础知识 再谈其他的)

2.1 JavaScript的变量

JS中变量的命名规则：

1.由字母、数字、下划线组成，区分大小写

2.必须以字母开头

3.变量名不能有空格，且大小写敏感

4.不能使用 JavaScript 中的关键字做变量名

变量声明：

在 JavaScript 中，用 Var 命令做声明变量，当然变量也可以不作声明，而在使用时再根据数据的类型来确其变量的类型；

JS的变量类型分为值类型和引用类型：

值类型变量的特点是

引用类型的变量特点是

变量的作用域和生命周期：

全局变量(分为函数外定义的变量和在函数内定义的无var声明的变量)可以在任何位置调用。

局部变量(分为在函数内使用var声明的变量和函数的参数变量)只能在当前函数体内调用。

JavaScript变量生命周期： 在它声明时初始化。局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁，即：除非被显式销毁，否则一直存在。

2.2JavaScript数据类型

Undefined：

使用var声明变量但是未进行初始化，对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined；undefined的变量和null用”==”进行比较时会返回true，因为undefined派生自null。声明空对象时我们可以将其初始化为null。

Null：null表示一个空对象的指针，使用typeof检查null时会返回object。

Boolean：true为真，false为假。

我们使用boolen()对各种数据类型的变量进行强制转换时的规则如下：非空字符串，非零数值，非空对象进行boolen()转换时返回true。

空字符串，0及NaN，null及undefined进行boolen()转换时返回false。

String：单引号和双引号不能交叉使用；使用.length属性访问字符串长度；字符串一旦被创建，其值不能改变，若想改变必须销毁原有字符串。String中常见的转义：\n换行；\t制表符；\b空格；\r回车符；\f分页符；\\斜杠\。

强制类型转换为string的函数有两种，分别是toString()和String()。

其中number,boolean，string，object以及number类型的数值基数使用toString()进行转换。

Null，undefined使用String()函数进行强制类型转换的操作。

Number：NaN的含义：not a Number或者非数值。任何涉及NaN的操作都将返回NaN；NaN与任何数值都不相等包括其自身。

Object：Object是一组数据或功能的集合。

2.3JavaScript中的运算符

2.4JavaScript中的流程控制语句

Switch/case 选择语句：

While循环语句：

While循环先检查条件再进行循环操作，可能一次循环也不执行。

Do-while循环先执行循环代码段再检查条件，do-while循环至少被执行一次。

For循环语句：

用循环变量的初始值与循环条件相比较来确定是否执行循环。

For-in循环语句：

循环输出的变量顺序不可预知，对象的值不能是null或者undefined。

在循环体中有3种跳转语句：

异常处理语句有4中：

2.5JavaScript中的函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2.6JavaScript中的数组

数组对象是使用单独的变量名来存储一系列的值。

创建空数组:

创建指定长度的数组:

创建指定元素的数组:

在一个数组中可以有不同的对象，所有的JavaScript变量都是对象。数组元素是对象。函数是对象。可以在一个数组中包含对象元素、函数、数组。

2.7JavaScript对DOM的操作

获取节点：

对节点赋值：

2.8JavaScript中的window对象

window和document的区别：

1、window指窗体。document指页面。document是window的一个子对象。

2、用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象只是一个可读的字符串。

Window对象中定位节点

PS: UI自动化测试对日历控件若不好操作，则可使用window.document.getElementById()等方法来赋值；

当然，对页面元素的赋值可使

读取页面元素的值可用

通过JS来模拟点击事件

三：环境配置及实战

首先安装node 不多说，请自行谷歌；

环境配置完事儿

3.1：mocha+chai实例演练

我们先来个简单的小例子哈~

先写个add.js

与exports相比module.exports是真正的接口，exports只不过是它的一个辅助工具。　最终返回给调用的是Module.exports而不是exports。 所有的exports收集到的属性和方法，都赋值给了module.exports。当然，这有个前提，就是module.exports本身不具备任何属性和方法。如果，module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略。

再写测试用例：

/* describe块的作用类似于"测试套件"（test suite），表示一组相关的测试。 it块才是真正执行的部分，it块作用就是"测试用例"（test case），表示一个单独的测试，是测试的最小单位。 describe块中可以包含无数个it块。 chai断言库中有expect和should两种断言api可以用，根据个人喜好选择。 /*

我们切换到项目目录下来执行命令：mocha add.test.js 结果如图：

C:\Users\IP-206\AppData\Roaming\Tencent\Users\834321678\QQ\WinTemp\RichOle\0)~ZSCZC_}V2(MKEO`5VM$1.png

实际项目中，我们一般把js源文件和单元测试文件分开放在不同的目录下：

下面是根据业务判断逻辑设计出的用例(我这里使用的是判定条件覆盖的方法)

我们看到有红色的输出就说明我们用例有失败的，一目了然哪个case是失败的

3.2：Jest实例演练

针对JS方法的测试用例：

测试结果：执行jest即可自动执行。

参考文档： mocha官网：https://mochajs.bootcss.com/ chai官网：https://www.chaijs.com/ istanbul官网：https://istanbul.js.org/ Jest中文站：https://www.jestjs.cn/ vue-test-utils: https://vue-test-utils.vuejs.org/zh/

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表