作为一个优秀的攻城狮必备的条件

随着前端的发展,前端设计的领域已经越来越多,也越来越复杂。这就对我们前端工程化能力,提出了更高的要求。 好的前端工程化一般包括三个大的方面:
  • 前端自动化测试(前提条件)
  • 高质量的代码设计
  • 高质量的代码实现

Jest的优点

  1. 比较新:喜新厌旧是人的天性,新技术出来后你总想动手尝试一下,这个就和家花没有野花香是一个道理。作为一个程序员,你更要有拥抱全新知识的态度。绝不能固步自封,顽固不化。(你们这些小年青永远体会不了老男人去洗浴中心的喜悦和急切心情的)

  2. 基础很好:框架基础好就是性能好、功能多、简单易用,Jest在这三个方面你可以完全放心。绝对是一把好手,干就完事了。

  3. 速度快: 单独模块测试功能,比如说有两个模块A和B,以前都测试过了,这时候你只改动A模块,才次测试,模块B不会再跑一次,而是直接测试A模块。这就好比你去‘大宝剑’,你所有技师都试过了一次,下次你再来,直接就找最好的就行了。不用再测试一遍。(安心、放心)

  4. API简单 :等你基础知识学完后,你就会发现API非常简单,数量也少。

  5. 隔离性好:Jest里会有很多的测试文件等待我们使用,Jest的执行环境都是隔离,这样就避免不同的测试文件执行的时候互相影响而造成出错。

  6. IDE整合:Jest直接可以和很多编辑器(VSCode)进行融合,让测试变的更加简单。

  7. 多项目并行:比如我们写了Node.js的后台项目,用React写了一个前台项目,Jest是支持他们并行运行,让我们的效率更加提高了。

  8. 快出覆盖率:(测试代码覆盖率) 对于一个项目的测试都要出覆盖率的,Jest就可以快速出这样的覆盖率统计结果,非常好用

废话那么多,现在开始搞重点

准备工作

  1. npm init  初始化一个package.json, 一直回车即可
  2. npm install jest@24.8.0 -D  安装jest框架
  3. 现在我们就可以开始一个jest的测试用例了。

开启你的第一个测试用例

hello.js

	function add (name) {
		return `hello ${name}`
	}
	// 这里需要使用 commonjs 的语法导出,和导入。jest 默认只支持这种语法, 需要es6语法的话,需要安装babel
	module.exports = { add }

hello.test.js

	// 这里把刚刚封装的方法导入进来 进行测试
	const { add } = require('./hello.js')  
	
	// test() 第一个参数: 测试用例名称, 第二个参数回调函数,用于执行测试用例
	// expect要执行的方法, toBe 类似 全等 ===  
	test('测试用例1',() => {
		expect(add('树哥')).toBe('hello 树哥')
	})
注解
  1. test方法:Jest封装的测试方法,一般填写两个参数,描述和测试方法
  2. expect方法 :预期方法,就是你调用了什么方法,传递了什么参数,得到的预期是什么(代码中详细讲解)。
这个时候如果要执行测试用例的话,要把package.json中的 scripts 中的 test 属性的值 修改为 jest

修改test:jest
npm test 执行测试用例

测试通过

下面讲一下,jest的命令

  1. jest --watchAll  执行当前目录下所有的测试文件中的测试用例
  2. jest --coverage  把执行过的测试用例绘制成图表

今天到此为止,明天讲一下匹配器的用法还有生成测试用例的图标

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐