jest (让人愉悦的测试框架)

1 什么是 Jest

Jest 是 Facebook 的一套开源的 JavaScript 测试框架，它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。

2 安装

使用 yarn 安装 Jest

yarn add --dev jest
复制代码

或 npm：

npm install --save-dev jest
复制代码

3 简单试用

首先来编写第一个求和函数 sum.js

function sum(a, b){return a + b;
}
module.exports = sum;
复制代码

接下来创建测试用例：

const sum = require('./sum');test('adds 1 + 2 to equal 3', () => {expect(sum(1, 2)).toBe(3);
})
复制代码

在 package.json 中配置测试启动脚本：

{"scripts": {"test": "jest"}
}
复制代码

最后，运行 yarn test 或 npm run test ,Jest 将打印下面这个消息：

PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)
复制代码

4 匹配器

普通匹配器

最简单的测试方法是比较是否精确匹配

test(`two plus tow is four`, () => {expect(2 + 2).toBe(4);
})
复制代码

Truthiness

在测试中，有时需要精准区分 undefined 、null 和 false，有时 又不需要区分，jest 都满足。

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

test('null', () => {const n = null;expect(n).toBeNull();expect(n).toBeDefined();expect(n).not.toBeUndefined();expect(n).not.toBeTruthy();expect(n).toBeFalsy();
});test('zero', () => {const z = 0;expect(z).not.toBeNull();expect(z).toBeDefined();expect(z).not.toBeUndefined();expect(z).not.toBeTruthy();expect(z).toBeFalsy();
});
复制代码

数字

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

test('two plus two', () => {const value = 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);
});
复制代码

对于比较浮点数相等，使用 toBeCloseTo 而不是 toEqual，因为你不希望测试取决于一个小小的舍入误差。

test('两个浮点数字相加', () => {const value = 0.1 + 0.2;//expect(value).toBe(0.3);           这句会报错，因为浮点数有舍入误差expect(value).toBeCloseTo(0.3); // 这句可以运行
});
复制代码

字符串

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/);
});
复制代码

Arrays and iterables

你可以通过 toContain 来检查一个数组或可迭代对象是否包含某个特定项：

const shoppingList = ['diapers','kleenex','trash bags','paper towels','beer',
];test('the shopping list has beer on it', () => {expect(shoppingList).toContain('beer');expect(new Set(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/);
});
复制代码

5 测试异步代码

回调

test('the data is peanut butter', done => {function callback(data) {expect(data).toBe('peanut butter');done();}fetchData(callback);
});
复制代码

Promises

test('the data is peanut butter', () => {return fetchData().then(data => {expect(data).toBe('peanut butter');});
});
复制代码

.resloves/.rejects

test('the data is peanut butter', () => {return expect(fetchData()).resolves.toBe('peanut butter');
});
复制代码

test('the fetch fails with an error', () => {return expect(fetchData()).rejects.toMatch('error');
});
复制代码

Async/Await

test('the data is peanut butter', async () => {const data = await fetchData();expect(data).toBe('peanut butter');
});test('the fetch fails with an error', async () => {expect.assertions(1);try {await fetchData();} catch (e) {expect(e).toMatch('error');}
});
复制代码

6 挂载与卸载（Setup and Teardown）

用于在写测试的时候 需要运行测试前做的一些 准备工作，和在运行测试后进行的一些整理工作。

为多次测试重复设置

beforeEach(() => {initializeCityDatabase();
});afterEach(() => {clearCityDatabase();
});test('city database has Vienna', () => {expect(isCity('Vienna')).toBeTruthy();
});test('city database has San Juan', () => {expect(isCity('San Juan')).toBeTruthy();
});
复制代码

一次性设置

beforeAll(() => {return initializeCityDatabase();
});afterAll(() => {return clearCityDatabase();
});test('city database has Vienna', () => {expect(isCity('Vienna')).toBeTruthy();
});test('city database has San Juan', () => {expect(isCity('San Juan')).toBeTruthy();
});
复制代码

作用域

默认情况下，before 和 after 的块可以应用到文件中的每个测试。 此外可以通过 describe 块来将测试分组。 当 before 和 after 的块在 describe 块内部时，则其只适用于该 describe 块内的测试。

// Applies to all tests in this file
beforeEach(() => {return initializeCityDatabase();
});test('city database has Vienna', () => {expect(isCity('Vienna')).toBeTruthy();
});test('city database has San Juan', () => {expect(isCity('San Juan')).toBeTruthy();
});describe('matching cities to foods', () => {// Applies only to tests in this describe blockbeforeEach(() => {return initializeFoodDatabase();});test('Vienna <3 sausage', () => {expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);});test('San Juan <3 plantains', () => {expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);});
});复制代码

6 函数测试（mockFunction）

使用 mock 函数

function forEach(items, callback) {for (let index = 0; index < items.length; index++) {callback(items[index]);}
}const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);// The mock function is called twice
expect(mockCallback.mock.calls.length).toBe(2);// The first argument of the first call to the function was 0
expect(mockCallback.mock.calls[0][0]).toBe(0);// The first argument of the second call to the function was 1
expect(mockCallback.mock.calls[1][0]).toBe(1);// The return value of the first call to the function was 42
expect(mockCallback.mock.results[0].value).toBe(42);
复制代码

mock 的返回值

const myMock = jest.fn();
console.log(myMock());
// > undefinedmyMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);console.log(myMock(), myMock(), myMock(), myMock());
// > 10, 'x', true, true
复制代码

7 快照（snapshot）

使用快照功能给组件做快照，方便后面调整后与快照对比

使用 React 的 test renderer 和 Jest 的快照特性来和组件交互，获得渲染结果和生成快照文件：

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';test('Link changes the class when hovered', () => {const component = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>,);let tree = component.toJSON();expect(tree).toMatchSnapshot();// manually trigger the callbacktree.props.onMouseEnter();// re-renderingtree = component.toJSON();expect(tree).toMatchSnapshot();// manually trigger the callbacktree.props.onMouseLeave();// re-renderingtree = component.toJSON();expect(tree).toMatchSnapshot();
});
复制代码