前端js单元测试框架jest使用方法介绍

大部分开发人员都了解必须写单元测试卷，可是不清楚每一单元测试卷运用的主题思想及其怎样做单元测试卷，在详细介绍jest检测架构前，人们首先来掌握下一些检测有关的定义。

为什么需要单元测试

• 保证质量：随着迭代的过程，开发人员很难记清所有的功能点，功能点的新增和删除在代码改变后，进行回归测试时，依靠人工QA很容易出错遗漏。
• 自动化：通过编写测试用例，只需要编写一次，多次运行，同样的事情不需要从头再来测一遍,很多时候QA的工作量就是这么增加的，新的版本上线，人工QA都需要所有的功能点从新测试一遍。
• 特性文档：单元测试可以作为描述和记录代码所实现的所有需求，有时候可以作为文档来使用，了解一个项目可以通过阅读测试用例比看需求文档更清晰。
• 驱动开发，指导设计：代码被测试的前提是代码本身的可测试性，那么要保证代码的可测试性，就需要在开发中注意API的设计，TDD将测试前移就是起到这么一个作用

测试类型

你可能接触过各种测试框架、大体上，最重要测试类型有：

• 单元测试- 依靠模拟输入证实是否是期望的输出来分别的测试函数或者类。
• 集成测试 - 测试若干模块来确保他们像预期的那样工作。
• 功能测试- 在产品本身（例如在浏览器上）对一个场景进行操作，而不考虑内部结构以确保预期的行为。

测试工具类型

测试工具可以分为以下功能，有些提供一个功能，有些提供一个组合。使用工具组合是很常见的，即使你可以使用单一的工具实现同样的功能，是所有组合可以获得更灵活的功能。

1. 测试环境（Mocha , Jasmine, Jest, Karma）
2. 测试结构 （Mocha , Jasmine, Jest, Cucumber）
3. 断言函数（Chai, Jasmine, Jest, Unexpected）
4. 生成,显示、监听测试结果（Mocha , Jasmine, JestKarma）
5. 生成,比较组件和数据结构的快照，以确保之前运行的更改是预期的。（Jest,Ava）
6. mocks。(sinon.js) 目前使用最多的mock库，将其分为spies、stub、fake XMLHttpRequest、Fake server、Fake time几种，根据不同的场景进行选择。
7. 生成代码覆盖率报告。（Istanbul, Jest）
8. 浏览器或者类浏览器环境执行控制。（Protractor ,  Nightwatch, Phantom, Casper）

单元测试技术的实现原理

1. 测试框架：判断内部是否存在异常，存在则console出对应的text信息
2. 断言库：当actual值与expect值不一样时，就抛出异常，供外部测试框架检测到，这就是为什么有些测试框架可以自由选择断言库的原因，只要可以抛出异常，外部测试框架就可以工作。
3. mock函数：创建一个新的函数，用这个函数来取代原来的函数，同时在这个新函数上添加一些额外的属性，例如called、calledWithArguments等信息

测试用例的钩子

describe块之中，提供测试用例的四个钩子：before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

如何写单元测试用例

• 只考虑测试，不考虑内部实现
• 不要做无谓的断言
• 让每个单元测试保持独立
• 所有的方法都应该写单元测试
• 充分考虑数据的边界条件
• 对重点、复杂、核心代码，重点测试
• 利用AOP(beforeEach、afterEach),减少测试代码数量，避免无用功能
• 使用最合适的断言方式

TDD

一句话简单来说，就是先写测试，后写功能实现。TDD的目的是通过测试用例来指引实际的功能开发，让开发人员首先站在全局的视角来看待需求。具体定义可以查看维基;

BDD

行为驱动开发要求更多人员参与到软件的开发中来，鼓励开发者、QA、相关业务人员相互协作。BDD是由商业价值来驱动，通过用户接口(例如GUI)理解应用程序。详见维基.

Jest介绍--Painless JavaScript Testing

Jest 是一款 Facebook 开源的 JS 单元测试框架，目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。

Jest功能：

• 内置Jasmin语法
• 内置auto mock
• 自带mock API
• 前端友好（集成JSDOM）
• 支持直接使用Promise和async/await书写异步代码
• 支持对 React 组件进行快照监控
• 扩展和集成 Babel 等常用工具集也很方便
• 自动环境隔离

Jest用法：

安装：

package.json中添加：

运行 npm test

也可通过命令行运行：jest my-test --notify --config=config.json附加配置

项目根目录添加.babelrc文件

Jest自动定义 NODE_ENV = test

测试脚本的写法

下面是一个加法模块[add.js]

(https://github.com/ruanyf/mocha-demos/blob/master/demo01/add.js)的代码。

要测试这个加法模块是否正确，就要写测试脚本。通常，测试脚本与索要测试的源码脚本同名，但是后缀名为.test.js（表示测试）或者.spec.js（表示规格）。比如，add.js的测试脚本名字就是[add.test.js]

(https://github.com/ruanyf/mocha-demos/blob/master/demo01/add.test.js

)。

• 测试脚本里面应该包括一个或多个describe块，每个describe块应该包括一个或多个it块。
• describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。
• it块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"1 加 1 应该等于 2"），第二个参数是一个实际执行的函数。

断言库的用法

所谓"断言"，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。上面这句断言的意思是，调用add(1, 1)，结果应该等于2。

所有的测试用例（it块）都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现

__ _ _  mocks __ _ _/fetch.js

fetch.js

annouce.js

annouce.test.js

注意：

1. mocks  __文件夹要和要mock的方法放在同一级目录。

2.如果mock的是nodejs方法，__ mocks ____文件夹要放在项目根目录。

本文来源于：前端js单元测试框架jest使用方法介绍-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。