react组件测试框架总结

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

 

通常，测试脚本与所要测试的源码脚本同名，但是后缀名为.test.js（表示测试）或者.spec.js（表示规格）。比如，add.js的测试脚本名字就是add.test.js

 

chai是一套TDD(测试驱动开发)/BDD(行为驱动开发)的断言库

 

jest测试框架的安装

jest 是 Facebook 的一套开源的 JavaScript 测试框架，它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。

1.安装Node.js

2.命令框输入npm install --save-dev jest

3.生成package.json文件  命令：npm init

4.在package.json文件中设置jest框架

"scripts": {

    "test": "jest"

  },

5.执行jest测试框架初始化时，确保他在项目的根目录 命令：npx jest --init

6.执行jest测试 npm run test

7.生成代码覆盖率  npx jest --coverage

8.生成用例执行覆盖报告 npm run coverage

 

 

 Enzyme 支持的三种渲染类型。

shallow

shallow 基本上每次仅渲染第一层组件。换句话说，Enzyme 不会渲染测试的子元素。考虑这些情况，如果您希望在与周围或内部隔离的情况下， 仅测试组件本身。你会更喜欢单元测试而不是完整的集成测试，这种渲染类型会非常有用。

mount

这种渲染方式和 shallow 方式相反，需要使用包含全部子元素的完整 DOM 结点来进行渲染。它适用于每个组件与其他组件(如 DOM API)密集交互的情况。

render

它将组件渲染成 HTML 静态文件，该静态文件包含所有的子元素。同时，它阻止了对 React 生命周期方法的访问，这反过来，又为测试提供了更少的灵活性和功能 。此外，它速度更快。它建立在 Cheerio(详情见下方链接) 之上，Cheerio 是一个基于 jQuery 核心功能在服务器上对 DOM 进行操作和遍历的 API。因此，您将掌握 jQuery 的所有功能。

 

Mocha（发音"摩卡"）诞生于2011年，是现在最流行的JavaScript测试框架之一，在浏览器和Node环境都可以使用。

mocha命令后面紧跟测试脚本的路径和文件名，可以指定多个测试脚本。

$ mocha file1 file2 file3

 

Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。

 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列。

测试脚本里面应该包括一个或多个describe块，每个describe块应该包括一个或多个it块。

describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。

describe，作用是将test分组，影响 beforeEach/afterEach/beforeAll/afterAll四个方法的作用域，它有两个参数

第一个参数就是分组描述，描述这个分组是干嘛的

第二个参数是个回调函数，内部可以有多个test，test的作用是声明一个测试

it块（test块）称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"1 加 1 应该等于 2"），第二个参数是一个实际执行的函数。

Describe块的执行顺序：

1.先执行其他，也就是先输出“其他”

2.然后找第一个it块，先执行beforeAll，再执行beforeEach

3.然后执行it块

4.再运行afterEach，因为还有这个不是最后一个it，所以不执行afterAll

5.找到第二个it块，因为不是第一个it块，所以不执行befoeAll，只执行beforeEach

6.执行第二个it块

7.先执行afterEach,因为是最后一个it块，所以继续执行afterll.

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

所有的测试用例（it块）都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现，Mocha本身不带断言库，所以必须先引入断言库。

 

mock定时器

jest的mock功能，可以模拟定时器执行，有4个重要的API必须了解一下：

jest.useFakeTimers() 声明在当前测试文件中使用模拟定时器，声明后，可以直接用expect(setTimeout).toHaveBeenCalledTimes(1)判断定时器调用的次数

jest.runAllTimers() 立即执行所有定时器

jest.runOnlyPendingTimers() 立即执行挂起的定时器

jest.advanceTimersByTime(msToRun) 提前msToTun毫秒执行定时器

第1个API需要注意，仅仅声明jest.useFakeTimers()，定时器回调的代码并不会执行，第2、3、4个API都会真正执行定时器回调代码；