自学大前端随笔(二)jest教程，详细API版本加示例

一、背景:

        老师要求学习jest，但是官方文件内容较多且都是英文，有中文释义版本但是没涵盖全部API，因此自行整理一份详细API版本，部分配上我运行后的截图，最后给出示例。

二、介绍:

1. Jest：目前最流行的前端测试框架，几乎国内所有的大型互联网公司都在使用。
2. 官方文件快速入门 · Jest 中文文档 | Jest 中文网

三、Global API:

        

        包含4个钩子函数，网上很多资料介绍钩子函数，在此简单写出示例，以及详细介绍除此之外的global API，如下:

编号	钩子函数	说明	示例
1	beforeAll	在所有测试用例运行test()之前，该函数只会执行一次，会先调用 beforeAll 钩子函数,在这期间可以做一些全局变量的初始化	beforeAll(()=>{ console.log('吃完饭后，走进了红浪漫洗浴') })
2	beforeEach	每个测试用例执行之前，都会调用，类似 vue-router 的 beforeEach，这样每次测试都是一个全新的实例，各个用例之间互不干扰。	afterAll(()=>{ console.log('有钱人的生活就是这么的枯燥且寂寞') })
3	afterEach	与beforeEach相反，每个测试用例执行之后，都会调用，类似 vue-router 的 beforeEach，这样每次测试都是一个全新的实例，各个用例之间互不干扰。	beforeEach(()=>{ console.log('给了300元钱后......') })
4	afterAll	在所有测试用例运行test()完之后，会先调用 afterAll 钩子函数，该函数只会执行一次	afterEach(()=>{ console.log('完成后，我心满意足的坐在沙发上！！！') })

编号	函数名	释义	示例
1	describe	describe(name, fn) 创建一个将几个相关测试组合在一起的块	const myBeverage = { delicious: true, sour: false, }; describe('my beverage', () => { test('is delicious', () => { expect(myBeverage.delicious).toBeTruthy(); }); test('is not sour', () => { expect(myBeverage.sour).toBeFalsy(); }); });
2	describe.each	describe.each(table)(name, fn, timeout)允许编写一次测试套件并传入数据	describe.each([ {a: 1, b: 1, expected: 2}, {a: 1, b: 2, expected: 3}, {a: 2, b: 1, expected: 3}, ])('.add($a, $b)', ({a, b, expected}) => { test(`returns ${expected}`, () => { expect(a + b).toBe(expected); }); test(`returned value not be greater than ${expected}`, () => { expect(a + b).not.toBeGreaterThan(expected); }); test(`returned value not be less than ${expected}`, () => { expect(a + b).not.toBeLessThan(expected); }); });
3	describe.only	describe.only(name, fn)如果您只想运行一个 describe 块，则可以使用 describe.only	describe.only('my beverage', () => { test('is delicious', () => { expect(myBeverage.delicious).toBeTruthy(); }); test('is not sour', () => { expect(myBeverage.sour).toBeFalsy(); }); }); describe('my other beverage', () => { // ... will be skipped });
4	describe.only.each	describe.only.each(table)(name, fn)如果您只想运行数据驱动测试的特定测试套件，请使用 describe.only.each	describe.only.each([ [1, 1, 2], [1, 2, 3], [2, 1, 3], ])('.add(%i, %i)', (a, b, expected) => { test(`returns ${expected}`, () => { expect(a + b).toBe(expected); }); }); test('will not be ran', () => { expect(1 / 0).toBe(Infinity); });
5	describe.skip	describe.skip(name, fn)如果您不想运行特定的 describe 块，可以使用 describe.skip	describe('my beverage', () => { test('is delicious', () => { expect(myBeverage.delicious).toBeTruthy(); }); test('is not sour', () => { expect(myBeverage.sour).toBeFalsy(); }); }); describe.skip('my other beverage', () => { // ... will be skipped });
6	describe.skip.each	describe.skip.each(table)(name, fn)如果您想停止运行一套数据驱动测试，请使用 describe.skip.each	describe.skip.each([ [1, 1, 2], [1, 2, 3], [2, 1, 3], ])('.add(%i, %i)', (a, b, expected) => { test(`returns ${expected}`, () => { expect(a + b).toBe(expected); // will not be ran }); }); test('will be ran', () => { expect(1 / 0).toBe(Infinity); });
7	test	test(name, fn, timeout)在测试文件中您需要的只是运行测试的测试方法。例如，假设有一个函数inchesOfRain() 应该为零 第一个参数是测试名称 第二个参数是方法，包括一个可测试的expectations 第三个参数是超时时限，决定中止前可等待的时长，默认5秒	test('did not rain', () => { expect(inchesOfRain()).toBe(0); });
8	test.concurrent	test.concurrent(name, fn, timeout)如果您希望测试同时运行，请使用 t