【Day11】测试方法、Jest、Ezyme的介绍(•‿•)

要进入写测试之前呀~我们必须要先了解为什麽要写测试，及我们会说明一种测试的开发方法(TDD)

写测试主要是用来保护我们的程序码而且可以有效的降低BUG出现的机率!

上面说到的TDD，全名又叫作 => Test-Driven Development (参考小菜鸟画的简易图 ↓ )

步骤: 定义规格 ->开发软件

• 主要是避免开发者不写TEST CODE的状况

• 有较低的BUG比率

• 避免过度设计

前端的测试方法大致上又分为三种 (UI测试、集成测试、单元测试)

再参考小菜鸟画的一张简易图 ↓

• Unit Test (单元测试) : 通常是用来测试一个function (比较有指标性及模块化 => 也就是范围小，好控制的意思啦~)
• Integration Test (集成测试) : 让几个单元合在一起作测试 (有时候互相影响的几个function，就可以用这种类型的测试方法)
• E2E Test (End-to-end) : 模拟使用者和APP的互相影响

以上是三种比较常见测试方法及一种测试开发方法的介绍~

接下来要介绍我们的主角 Jest了 ! 前面有提到说 Jest 是一种测试框架 ，
当然~还有其他的测试框架，只是因为Jest和React的整合度比较高，
所以很多React的开发者都建议使用Jest

Jest

• 是FB开发出的一个测试框架
• 优点是比其他框架还多了内建的测试工具
• 还有一个优点是只执行有更动程序码的function的测试 => 提高测试速度
• 可以透过npm 或是 yarn 来安装 (往後的介绍会使用npm来安装)

除了了解框架以外，我们还要了解所要使用的测试工具库 => Enzyme

Enzyme

• 是开源程序码 => Airbnb 开发出来的

• 是透过官方的测试库工具(ReactTestUtils)进行二次封装，所衍生出来强大的API

• 优点

  • 可以为测试建立虚拟的DOM且可以透过Jquery的方式来对DOM进行处理
  • 允许测试可以不用经由浏览器
  • 可以模拟单一个事件
  • 有两个渲染方式 Shallow Rendering 和 Mount Rendering (後续我们会用到的是Shallow Rendering，这边先不细讲，後续有机会再来补充~)
  • 可以操作 Props 和 States
  • 可以检查 Props 和 States

介绍完了测试的基本概念及我们要使用的框架和工具，
下一篇我们要正式建立一个React专案并安装Jest和Enzyme来完整我们的测试罗!

一步一步跟着小菜鸟往前吧~ GOGOGO !!