黑马程序员技术交流社区

标题: 【上海校区】令人愉快的 JavaScript 测试 [打印本页]

---

作者: 不二晨    时间: 2018-10-15 09:22
标题: 【上海校区】令人愉快的 JavaScript 测试
1 简介

1.1 Jest 是什么？

Jest 是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript 单元测试工具。提供了包括内置的测试环境 DOM API 支持、断言库、Mock 库等，还包含了 Snapshot Testing、 Instant Feedback 等特性。它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。

1.2 谁在用？

1.3 卖点

• Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。
• 而作为一个面向前端的测试框架， Jest 可以利用其特有的快照测试功能，通过比对 UI 代码生成的快照文件，实现对 React 等常见框架的自动测试。
• 此外， Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度。目前在 Github 上其 star 数已经破万；而除了 Facebook 外，业内其他公司也开始从其它测试框架转向 Jest ，比如 Airbnb 的尝试 ，相信未来 Jest 的发展趋势仍会比较迅猛。
  

---

2 课前准备2.1 测试框架测试框架的作用是提供一些方便的语法来描述测试用例，以及对用例进行分组。测试框架可分为两种： TDD （测试驱动开发）和 BDD （行为驱动开发），我理解两者间的区别主要是一些语法上的不同，其中 BDD 提供了提供了可读性更好的用例语法，至于详细的区别可参见The Difference Between TDD and BDD - Josh Davis 一文。常见的测试框架有 Jasmine, Mocha 以及本文要介绍的 Jest 。
2.2 断言库断言库主要提供语义化方法，用于对参与测试的值做各种各样的判断。这些语义化方法会返回测试的结果，要么成功、要么失败。常见的断言库有 Should.js, Chai.js 等。
测试覆盖率工具用于统计测试用例对代码的测试情况，生成相应的报表，比如 istanbul

---

3 上手初始化一个项目
mkidr $CODE_PATH && cd $CODE_PATHnpm init -ynpm i -D jest复制代码

⚠️ jest 默认不支持es6 如果需要测试es6 需要额外安装
npm i -D babel-jest babel-core babel-preset-env
并且增加.babelrc 配置如下：

{  "presets": ["env"]}复制代码在package.json添加测试脚本
{  "scripts": {    "test": "jest",    "test:watch": "jest --watchAll"  }}复制代码这样我们的食材就准备好了✌️
3.1 第一个例子

---

作者: 不二晨    时间: 2018-10-15 16:00
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2