【Day20】建立计数器的Test，并提供测试使用的方法 ୧☉□☉୨!

上一篇我们把计数器Component完成了，这篇要来写这个计数器的测试了!

首先我们要先建立一个属於它的测试档案

(还记得之前有提过说测试档案的名称要是那个Component名称+上.test吗?)

但因为我们用的是App这个Component,
所以如果是透过creat-react-app这个指令来建置专案的朋友们，
本身就已经会有App.test.js这个档案了~

那我们就开始吧~

• import Enzyme和EnzymeAdapter，并设定Enzyme要使用哪一个版本的adapter (取决於之前安装的版本)

  import Enzyme from 'enzyme';
  import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';
  
  Enzyme.configure({adapter:new EnzymeAdapter()});
  

• 再来，我们要想想计数器应该要做什麽事 (ex: 正确的显示数字、正确的显示Component、按下增加数字是否有+1...等等的)，那这边我们要用jest的test建立五个functions

  • 正常显示Component

    test("renders without errors",()=>{
    
    });
    

  • 按钮是否正常显示

    //按钮是否显示
    test("render button",()=>{
    
    });
    

  • 显得数字是否正确

    //counter 数字是否正确显示
    test("counter display",()=>{
    
    });
    

  • 数字的初始值是否为0

    //counter 的初始值是否为0
    test("counter start at 0",()=>{
    
    });
    

  • 按下增加按钮後，数字是否+1

    //按下按钮 counter是否加一
    test("clicking on button increments counter display",()=>{
    
    });
    

• 如果说今天测试档案里没有半个测试是会报错的哦! 至少需要涵盖一个测试

• 写每个单元测试的时候除了名称浅显易懂，最好的话，可以附上注解。

建立完5个functions後，就要来考虑我们到底会用到哪几个DOM，

要来帮它们补上data-test这个属性以便我们在单元测试的时候取得该DOM。

那下一篇~除了补上data-test属性外，就要来填充我们的那五个单元测试罗!

各位看官们会发现小菜鸟其实从头到现在使用的都是ES6语法，

虽然说某些浏览器(ex: IE)不支援，要透过babel来编译成旧的ES5(较稳定版本)的语法，

又虽然说ES6和ES7是较新的版本，但写法其实简略很多，

就像很多语言的版本也会往上开发一样 (ex: JAVA7到JAVA8 的 LAMDA)，

写法大概就是用久了就看的习惯了 | •́ ▾ •̀ |

而且呀...小菜鸟最近在用一些react较新版本的套件，

发现其实很多都含有箭头函式(也就是ES6语法)，
根本不理你浏览器是不是有支援...很懊恼啊... ಥ⌣ಥ

好啦其实小菜鸟只是想发发牢骚，觉得IE很让我头痛，
但11月这个浏览器就要被淘汰啦~

除了跟不上市场的需求外，还有安全性的问题，有时还会跑版，
然後小菜鸟个人觉得IE的Console视窗也好难看!!

11月後终於能安心的使用ES5以上的版本开发了 !

微软不用IE，还有Edge能用 !