前端自动化测试 - Jest基础配置篇（一） - jest - 测试 - 设计开发

# 市面上主流的前端测试框架

Jasmine ： JavaScript 测试框架（BDD），这个也算是比较早的测试框架。
MOCHA: 它是一个功能丰富的 JavaScript 测试框架，运行在 Node.js 和浏览器中，使异步测试变得简单有趣。也是非常优秀的框架。
Jest：目前最流行的前端测试框架，几乎国内所有的大型互联网公司都在使用。

# Jest 优点：

比较新，性能好、功能多、简单易用，单独模块测试功能（测试快），API 简单，隔离性好，IDE 整合，多项目并行，快出覆盖率...

# 1. 环境搭建（本地需要 node 环境）

在本地新建一个文件夹，进入文件夹，然后命令行执行：

	npm init // 快速生成一个 package.json 文件
	npm install jest@24.8.0 -D

# 2. 简单 demo 测试

在根目录新建文件 index.js index.test.js

	//index.js
	function kecheng1(money){
	return money>=200? '名师辅导':'自学'
	}

	function kecheng2(money){
	return money>=1000? '双语教程':'普通教程'
	}
	module.exports = {
	kecheng1,kecheng2
	}

	//index.test.js
	const xuexi = require('./index')
	const { kecheng1 , kecheng2 } = xuexi
	test('学习1 300元',()=>{
	expect(kecheng1(300)).toBe('名师辅导')
	})

	test('学习2 2000元',()=>{
	expect(kecheng2(2000)).toBe('双语教程')
	})

你发现在文件名是有 test 的，对，这个文件就是用来测试 index.js 文件的，Jest 会自动找对应的 test 作为测试文件，所以我们这里也使用了.test 文件名，其中：

test 方法：Jest 封装的测试方法，一般填写两个参数，描述和测试方法
expect 方法：预期方法，就是你调用了什么方法，传递了什么参数，得到的预期是什么 (代码中详细讲解)

# 3. 基本配置和测试覆盖率

什么是 “单元测试”? 什么是 “集成测试”

单元测试：英文是 (unit testing) 单，是指对软件中的最小可测试单元进行检查和验证。前端所说的单元测试就是对一个模块进行测试。也就是说前端测试的时候，你测试的东西一定是一个模块。
集成测试：也叫组装测试或者联合测试。在单元测试的基础上，将所有模块按照涉及要求组装成为子系统或系统，进行集成测试。

	npx jest --init
	//Choose the test environment that will be used for testing ?(Web) 代码是运行在 Node 环境还是 Web 环境下？

	//Do you want Jest to add coverage reports ? (y) 是否生成测试覆盖率文件？

	//Automatically clear mock calls and instrances between every test?(y) 是否需要在测试之后清楚模拟调用的一些东西？
	// 你会发现你的工程根目录下多了一个 jest.config.js

# 4.Jest 中的匹配器

toBe() 匹配器，是在工作中最常用的一种匹配器，简单的理解它就是相等。这个相当是等同于 === 的，也就是我们常说的严格相等
toEqual() 内容相等，就可以通过测试
toBeNull() 匹配器只匹配 null 值，需要注意的是不匹配 undefined 的值
toBeUndifined() 匹配 undefined 时，就可以使用 toBeUndifined () 匹配器
toBeDefined() 匹配器的意思是只要定义过了，都可以匹配成功
toBeTruthy() 是 true 和 false 匹配器，就相当于判断真假的
toBeFalsy() 有真就有假，跟 toBeTruthy () 对应的就是 toBeFalsy, 这个匹配器只要是返回的 false 就可以通过测试
toBeGreaterThan() 这个是用来作数字比较的，大于什么数值，只要大于传入的数值，就可以通过测试
toBeLessThan () toBeLessThan 跟 toBeGreaterThan 相对应的，就是少于一个数字时，就可以通过测试
toBeGreaterThanOrEqual () 数据大于等于期待数字时，可以通过测试
toBeLessThanOrEqual () 跟 toBeGreaterThanOrEqual () 相对应
toBeCloseTo() 这个是可以自动消除 JavaScript 浮点精度错误的匹配器，举个例子，比如我们让 0.1 和 0.2 相加，这时候 js 得到的值应该是 0.30000000000004, 所以如果用 toEqual () 匹配器，测试用例会通过不了测试的
toMatch() 字符串包含匹配器
toContain() 数组的匹配器
toThrow() 专门对异常进行处理的匹配器，可以检测一个方法会不会抛出异常
not 匹配器是 Jest 中比较特殊的匹配器，意思就是相反或者说取反。比如上面的例子，我们不希望方法抛出异常，就可以使用 not 匹配器

	const throwNewErrorFunc = ()=>{
	throw new Error('this is a new error')
	}

	test('toThrow匹配器',()=>{
	expect(throwNewErrorFunc).not.toThrow()
	})

更多匹配器 https://jestjs.io/docs/en/expect

# 5. 让 Jest 支持 import 和 ES6 语法

目前我们的 Jest 是不支持 import...from.... 这种形式，如果使用就会报错，因为 Jest 默认支持的是 CommonJS 规范，也就是 Node.js 中的语法，他只支持 require 这种引用。所以我们使用 import...from... 是 ES6 的语法，所以使用就会报错。我们找到了报错的原因后，就非常好解决了，只要我们把 import 形式转行成 require 就可以了呗。

打开 index.js index.test.js

	//index.js
	export function kecheng1(money){
	return money>=200?'名师辅导':'自学'
	}

	export function kecheng2(money){
	return money>=1000?'双语教程':'普通教程'
	}

	//index.test.js

	import {kecheng1,kecheng2} from './index.js'

	test('学习1 300元',()=>{
	expect(kecheng1(300)).toBe('名师辅导')
	})

	test('学习2 2000元',()=>{
	expect(kecheng2(2000)).toBe('双语教程')
	})

这时候你用 npm run test 来测试，你会发现是没办法使用的，会报很多错误。这是因为我们需要用 Babel 进行转换，没有 Babel 转换是肯定会报错的。

# 6.Babel 转换器的安装

其实解决这个问题，直接使用 Babel 就可以把代码转换成 CommonJS 代码，然后就可以顺利进行测试了。那现在就来安装一下 Babel

npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D

耐心等待 babel 安装完成，然后打开 package.json 文件，可以看到文件里有这样两行代码。

	"devDependencies": {
	"@babel/core": "^7.4.5",
	"@babel/preset-env": "^7.4.5",
	"jest": "^24.8.0"
	},

看到这样的代码，说明 Babel 已经安装成功。然后我们还需要对 Babel 进行配置。

Babel 的基本配置
我们在项目根目录下新建一个 .babelrc 的文件，作为一个前端，你对这个文件应该是非常熟悉的，babel 的转换配置就写在这个文件里。

	{
	"presets":[
	[
	"@babel/preset-env",{
	"targets":{
	"node":"current"
	}
	}
	]
	]
	}

当你写完这段代码后，就可以进行转换了。我们再次使用 npm run test 进行测试，这时候就可以正确通过测试了。也就是说我们用的 babel 起到作用了。

那为什么会这样那？其实在 Jest 里有一个 babel-jest 组件，我们在使用 npm run test 的时候，它先去检测开发环境中是否安装了 babel ，也就是查看有没有 babel-core ，如果有 bable-core 就会去查看 .babelrc 配置文件，根据配置文件进行转换，转换完成，再进行测试。

jest