來到測試的尾聲，來把前面所學的整理一下吧!

• First Step => 要進行測試，我們勢必要有東西給它測試，而且也要有可以進行測試的套件

  • 利用以下指令來建立專案

    npx create-react-app  專案名稱
    

  • 執行以下指令來安裝Jest

    npm install --save-dev jest
    

  • 再來執行以下指令來安裝Enzyme (目前官方react版本17尚未支援Enzyme，但可以安裝非官方版本的Enzmye來搭配版本17)

    npm install --save-dev enzyme jest-enzyme enzyme-adapter-react-16/@wojtekmaj/enzyme-adapter-react-17
    

  • 安裝其他刻劃版面時會用到的套件 (bootstrap or fontawesome..等等)

• Second Step => 安裝完所有我們所需的套件後，將渲染和取得元素寫成共用的function以便每次單元測試使用

  • 透過Shallow渲染 : 參數放要渲染的Component

    const setup=()=>shallow(<App/>);
    

  • 取得DOM : wrapper傳入的是被渲染的Component，value則是data-test屬性的值

    const findByTestAttribute=(wrapper,value)=>wrapper.find(`[data-test='${value}']`);
    

• Third Step => 透過共用function setup 渲染出Component後，利用共用function findByTestAttribute去尋找DOM，且透過Enzyme的API去針對DOM做測試 (ex: text(),isEmpty()等等)

  • Enzyme API 參考文件 : https://enzymejs.github.io/enzyme/docs/api/
  • 若要模擬事件觸發則可以使用simulate api

• Last Step => 透過上述完成單元測試後進行存檔，執行npm test 就可以看看測試是否成功囉 !

先前有提到寫測試的目的是為了要測試APP應該要做什麼，而不是APP是怎麼運行的

這句話的意思是我們應該要去看APP做什麼事情出來的結果是不是正確的 (我們要先想好結果為何)

而不是去照著APP運行寫測試。

重點

• 在寫測試時發現有太多重複的code，需要整理成共用的function
• 從單元測試的名稱最好就能淺顯易懂知道這個單元測試在做什麼 (可以的話附上註解)

以上!! 統整完畢~ 下一篇要來補充React Class Component的生命週期 ，再來還會有Function Component的Hook生命週期、Redux補充、React Query補充、

小菜鳥本身踩到的小地雷補充...等等的

那我們就下一篇見啦~ （〜^∇^)〜