- 单元测试(Unit tests):关注应用中每个零部件的正常运转,防止后续修改影响之前的组件。
- 功能测试(Functional tests):确保其整体表现符合预期,关注能否让用户正常使用。
整合测试(Integration tests):确保单独运行正常的零部件整合到一起之后依然能正常运行。
测试管理工具 是用来组织和运行整个测试的工具,它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来,并运行被测试代码进行测试。测试工具有很多选择 WebDriver/Selenium 2、Mocha、JsTestDriver、HTML Runners和Karma
- 测试框架 是单元测试的核心,它提供了单元测试所需的各种API,你可以使用它们来对你的代码进行单元测试。
- 断言库 提供了用于描述你的具体测试的API,有了它们你的测试代码便能简单直接,也更为语义化,理想状态下你甚至可以让非开发人员来撰写单元测试。当然,你也完全可以不使用断言库,而是用自己的测试代码去测试,不过几乎没有人会这么干,除非你自己实现了一个测试断言库。
- 测试浏览器 前端代码是运行在浏览器中的,要对其进行单元测试,只能将其运行在浏览器上。目前大部分测试工具都支持调用和运行本地浏览器来进行测试,但如果你的测试仅仅是针对函数和模块的单元测试,则完全可以使用无界面的浏览器:PhantomJs、Puppetee
- 测试覆盖率 一般情况下你的测试管理工具会提供相关的覆盖率统计工具,但是有些情况下它们提供的工具未必是你想要的。比如当被测试的代码是经过了某些打包工具打包完了且被压缩和混淆了,同时打包工具还混入了很多自己的代码,这时覆盖率的统计就容易不准确。所以为了避免这种情况,测试覆盖率统计工具需要谨慎选择,至少你得确认它支持你的打包工具已经打包好的代码。
选择框架会考虑下面的点:
- 断言(Assertions):用于判断结果是否符合预期。有些框架需要单独的断言库。
- 适合 TDD / BDD:是否适合 测试驱动型 / 行为驱动型 的测试风格。
- TDD (Test-Driven Development):测试驱动型的开发方式,先写测试代码,之后编写能通过测试的业务代码,可以不断的在能通过测试的情况下重构。
- BDD (Behavior-Driven Development):与 TDD 很相似,测试代码的风格是预期结果,更关注功能,看起来像需求文档。
- 异步测试:有些框架对异步测试支持良好。
- 使用的语言:大部分 js 测试框架使用 js。
- 用于特定目的:每个框架可能会擅长处理不同的问题。
- 社区是否活跃。
组合使用工具很常见
- 提供测试框架(Mocha, Jasmine, Jest, Cucumber)
- 提供断言(Chai, Jasmine, Jest, Unexpected)
- 生成,展示测试结果(Mocha, Jasmine, Jest, Karma)
- 快照测试(Jest, Ava)
- 快照测试(snapshot testing),测试 UI 或数据结构是否和之前完全一致,通常 UI 测试不在单元测试中
- 提供仿真(Sinon, Jasmine, enzyme, Jest, testdouble)
- 仿真(mocks, spies, and stubs):获取方法的调用信息,模拟方法,模块,甚至服务器
- 生成测试覆盖率报告(Istanbul, Jest, Blanket)
- 提供类浏览器环境(Protractor, Nightwatch, Phantom, Casper)
各框架特点
Jest
- facebook 坐庄
- 基于 Jasmine 至今已经做了大量修改添加了很多特性
- 开箱即用配置少,API简单
- 支持断言和仿真
- 支持快照测试
- 在隔离环境下测试
- 互动模式选择要测试的模块
- 优雅的测试覆盖率报告,基于Istanbul
- 智能并行测试(参考)
- 较新,社区不十分成熟
- 全局环境,比如 describe 不需要引入直接用
- 较多用于 React 项目(但广泛支持各种项目)
Mocha
- 灵活(不包括断言和仿真,自己选对应工具)
- 流行的选择:chai,sinon
- 社区成熟用的人多,测试各种东西社区都有示例
- 需要较多配置
- 可以使用快照测试,但依然需要额外配置
Jasmine
- 开箱即用(支持断言和仿真)
- 全局环境
- 比较’老’,坑基本都有人踩过了
AVA
- 异步,性能好
- 简约,清晰
- 快照测试和断言需要三方支持
Tape
- 体积最小,只提供最关键的东西
- 对比其他框架,只提供最底层的 API
Angular
Karma + jasmine + chai + puppeteer