前端测试框架Jest——语法篇 _测试框架

使用匹配器使用不同匹配器可以测试输入输出的值是否符合预期。下面介绍一些常见的匹配器。普通匹配器最简单的测试值的方法就是看是否精确匹配。首先是toBe()
test('two plus two is four', () => {expect(2 + 2).toBe(4);});toBe用的是JAVAScript中的Object.is()，属于ES6中的特性，所以不能检测对象，如果要检测对象的值的话，需要用到toEqual 。toEquel递归检查对象或者数组中的每个字段。
test('object assignment', () => {const data = https://www.isolves.com/it/cxkf/kj/2020-06-23/{one: 1};data['two'] = 2;expect(data).toEqual({one: 1, two: 2});});Truthiness
在实际的测试中，我们有时候需要区分undefined、null和false 。以下的一些规则有助于我们进行。

toBeNull只匹配null
toBeUndefined只匹配undefined
toBeDefine与toBeUndefined相反
toBeTruthy匹配任何if语句为真
toBeFalsy匹配任何if语句为假

数字匹配器
大多数的比较数字有等价的匹配器。

大于。toBeGreaterThan()
大于或者等于。toBeGreaterThanOrEqual()
小于。toBeLessThan()
小于或等于。toBeLessThanOrEqual()
toBe和toEqual同样适用于数字注意：对比两个浮点数是否相等的时候，使用toBeCloseTo而不是toEqual

例子如下：

test('two plus two', () => {const value = https://www.isolves.com/it/cxkf/kj/2020-06-23/2 + 2;expect(value).toBeGreaterThan(3);expect(value).toBeGreaterThanOrEqual(3.5);expect(value).toBeLessThan(5);expect(value).toBeLessThanOrEqual(4.5);// toBe and toEqual are equivalent for numbersexpect(value).toBe(4);expect(value).toEqual(4);});

test('两个浮点数字相加', () => {const value = https://www.isolves.com/it/cxkf/kj/2020-06-23/0.1 + 0.2;//expect(value).toBe(0.3);这句会报错，因为浮点数有舍入误差expect(value).toBeCloseTo(0.3); // 这句可以运行});

如果使用toBe就会产生以下结果：

文章插图

字符串
使用toMatch()测试字符串，传递的参数是正则表达式。

test('there is no I in team', () => {expect('team').not.toMatch(/I/);});test('but there is a "stop" in Christoph', () => {expect('Christoph').toMatch(/stop/);});

【前端测试框架Jest——语法篇】数组
如何检测数组中是否包含特定某一项？可以使用toContain()

const shoppingList = ['diapers','kleenex','trash bags','paper towels','beer',];test('购物清单（shopping list）里面有啤酒（beer）', () => {expect(shoppingList).toContain('beer');});

另外
如果你想在测试特定函数的时候抛出一个错误，在它调用的时候可以使用toThrow 。

function compileAndroidCode() {throw new ConfigError('you are using the wrong JDK');}test('compiling android goes as expected', () => {expect(compileAndroidCode).toThrow();expect(compileAndroidCode).toThrow(ConfigError);// You can also use the exact error message or a regexpexpect(compileAndroidCode).toThrow('you are using the wrong JDK');expect(compileAndroidCode).toThrow(/JDK/);});

测试异步代码在实际开发过程中，我们经常会遇到一些异步的JavaScript代码。当你有以异步方式运行的代码的时候，Jest需要知道当前它测试的代码是否已经完成，然后它可以转移动另一个测试。也就是说，测试用例一定要在测试对象结束之后才能够结束
为了达到这一目的，Jest有多种方法可以做到。
回调
最常见的异步模式就是回调函数。
注意：回调函数和异步没有必然的联系，回调只是异步的一种调用方式而已，不要将异步和回调两个概念结合起来谈
比如以下代码：
// 这里是同步执行的，完全没有异步function fun1(callback) {callback();}现在假设一个fetchData(call)函数，获取一些数据并在完成的时候调用call(data)，而我想要测试返回的数据是不是字符串'peanut butter'
默认情况下，一旦到达运行上下文底部，jest测试就会立即结束。这意味着这个测试将不能按照预期的进行。

function fetchData(call) {setTimeout(() => {call('peanut butter1')},1000);}test('the data is peanut butter', () => {function callback(data) {expect(data).toBe('peanut butter'); // 这里没有执行到// done()}fetchData(callback);});

这样做是不会报错的，因为没有执行到我们想要测试的语句中的时候Jest测试已经结束了。（一旦fetchData执行结束，此测试就在没有调用回调函数前结束，因为使用了setTimeout，产生了异步）