本文是前端开发工具系列之单元测试,主要会讨论利用常见的单元测试工具的原理和使用,保证前端开发时的代码正确性,该系列其他部分请参考这里。
本文后期会随着对自动化测试的探索不定时更新,最终会完成全套的自动化测试。
自动化测试分为三种类型
- unit test 单元测试是对一个模块、一个函数或者一个类来进行正确性检验的测试工作。
- integration test 集成测试是对多个模块作为一个整体进行测试。
- end-to-end 即E2E 端到端测试模拟真实用户的黑盒测试。
关于测试更多,可参考vue和react官方的描述
1 单元测试
单元测试和我们手动测试的逻辑是一样的,即执行某一个单元的逻辑,然后将执行结果和预期结果对比,如果一致则通过测试,否则失败。
一个测试框架通常包含两部分
- Test Runner 测试容器,自动执行内部的测试代码(包括断言库)
- Assertion Library 断言库,其中包含很多断言,即判断执行结果和预期是否一致。
比如
test('the best flavor is grapefruit', () => {//测试容器
expect(bestLaCroixFlavor()).toBe('grapefruit');//断言库
});
复制代码
执行结束后会自动将测试结果输出。
每个测试文件被称为test suite,每个具体的单元测试被称为test,即测试用例。
除了对常规的算法进行测试,还可以通过Snapshots测试ui。
前端测试框架这边推荐jest,也是react和vue官方推荐的测试工具
另外可参考
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会根据