上一篇我們把計數器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能用 !