【Day15】Enzyme的两个常用渲染API及Jest的几个API，和..设计测试的几个要点 （・θ・）

为了让我们的测试看起来乾净，就跟写Code一样，
浅显易懂是原则，所以我们要把握以下两点!

• DRY(Don't Repeat Yourself) => 将重复的code写成共用function,靠传入的参数并将结果进行return
• 写上Test和Test Function的注解 => 单元测试的名称最好就可以描述该测试所执行的内容

先来介绍Enzyme 的Shallow 和 Mount 两个渲染的API吧~

• Shallow: 适用於单元测试，而且可以确保我们的测试不会影响任何子类别Component的行为

  • 传入的是整个要测试的Component

  • 比较常用的function

    • find() : 在渲染出来的Component上面找寻某个节点
    • filter() : 在渲染出来的Component上过滤掉某的节点
    • contains() : 看看某个节点是否有出现在渲染出来的Component上
    • hasClass() : 判断某个节点上是否含有某个Class ( 跟jquery的hasClass一样 )

• Mount: 适用於有多个Component会互相影响的时候，
  使用这种渲染方式在测试里，被用到的DOM都会互相影响

  • 传入的参数和常用的function其实和shallow一样，差别只是在於不同的用途

再来介绍几个 JEST的function吧~

• expect() : 用来测试某个值，通常会搭配其他function，很少会单单只呼叫这个function
• toBe() : 测试某个值是不是符合自己期望的值，传入的是自己期望的值 (可以搭配expect作使用)
• toEqual() : 测试 expect的值是不是跟传入的值相等
• toHaveLength() : 测试某个值是不是符合所要的长度，传入的是数字

上面是Enzyme 两个渲染API的比较和 JEST的一些function的简单介绍，
後续在写测试的时候都会用到~

下一篇! 要来说明怎麽样让同样的Code写成共用function，
让我们的测试Code看起来简洁有力，

用的会是我们最最最基本的两个function

• 渲染Component的function
• 寻找节点的function