前端开发工具集（九）：单元测试（jest）

本文是前端开发工具系列之单元测试，主要会讨论利用常见的单元测试工具的原理和使用，保证前端开发时的代码正确性，该系列其他部分请参考这里。

本文后期会随着对自动化测试的探索不定时更新，最终会完成全套的自动化测试。

自动化测试分为三种类型

• unit test 单元测试是对一个模块、一个函数或者一个类来进行正确性检验的测试工作。
• integration test 集成测试是对多个模块作为一个整体进行测试。
• end-to-end 即E2E 端到端测试模拟真实用户的黑盒测试。

关于测试更多，可参考vue和react官方的描述

• vue test
• react test

1 单元测试

单元测试和我们手动测试的逻辑是一样的，即执行某一个单元的逻辑，然后将执行结果和预期结果对比，如果一致则通过测试，否则失败。
一个测试框架通常包含两部分

• Test Runner 测试容器，自动执行内部的测试代码（包括断言库）
• Assertion Library 断言库，其中包含很多断言，即判断执行结果和预期是否一致。

比如

test('the best flavor is grapefruit', () => {//测试容器
  expect(bestLaCroixFlavor()).toBe('grapefruit');//断言库
});
复制代码

执行结束后会自动将测试结果输出。

每个测试文件被称为test suite，每个具体的单元测试被称为test，即测试用例。
除了对常规的算法进行测试，还可以通过Snapshots测试ui。

前端测试框架这边推荐jest,也是react和vue官方推荐的测试工具

另外可参考

• Jest 自动化测试
• 深入浅出前端单元测试框架的实现原理

2 jest

jest和其他前端工具差不多，比如webpack，都可以在命令行或者npm script执行，可选的配置文件，各种钩子函数，用于各种具体实现的api。想来应该可以很容易上手，下面来了解一下。

2.1 基本使用

2.1.1 配置文件

配置文件可选，可通过jest --init进行交互式创建，文件名默认为jest.config.js或者通过--config参数指定。
具体配置选项查看这里。

配置完了可以在npm scripts中添加"test": "jest",，使用--watch或--watchAll可以在修改文件后自动测试。

2.1.2 代码组织

每次执行jest时，jest会根据