鐵人檔案
這次的三十篇會跟大家分享React的基礎及測試框架JEST和測試工具庫Enzyme，
會使用Visual Studio Code 這個IDE來進行操作
前十篇會介紹一些React的基礎，後二十篇會介紹使用測試框架。
看完這三十篇的最終目標是.....=>建立一個小組件並對其進行測試!
能學習到React的基礎知識及前端測試的基本概念!
要進入寫測試之前呀~我們必須要先了解為什麼要寫測試，及我們會說明一種測試的開發方法(TDD) 寫測試主要是用來保護我們的程式碼而且可以有效的降低BUG出現的機率...
首先!! 我們要先來建立一個React專案 執行以下指令來建立專案 npx create-react-app 專案名稱 如果不是用上述指令來建立專案的話...
前面我們有大概提到Enzyme的優點及作用~ 這篇我們要直接來安裝Enzyme和導入Enzyme來供我們後續的測試作使用! 由於Enzyme 不會在建立專案的時...
寫測試時，我們基本需要三樣東西 Enzyme Enzyme跟React溝通的適配器(Adapter) 在Enzyme裡，我們要使用的渲染方式 (Shallow...
為了讓我們的測試看起來乾淨，就跟寫Code一樣，淺顯易懂是原則，所以我們要把握以下兩點! DRY(Don't Repeat Yourself) =>...
首先!! 我們先來建立渲染Component的function (這邊用的會是es6的箭頭函式) const setup=()=>shallow(<...
其實在html裡，我們可以給予以data開頭的屬性， data-test這個屬性只是方便我們來辨別它是測試用的屬性 在html標籤上鑲入data-test屬...
上一篇有提到，我們可以在使用者模式(Production mode)將屬性隱藏起來不讓使用者看到。 首先~我們先來安裝一個babel套件 npm install...
我們先來畫我們的計數器吧! 為了讓我們的計數器精美一點點點， 我們先來安裝React的fontAwesome(一些icon)和React的bootstrap吧!...
上一篇我們把計數器Component完成了，這篇要來寫這個計數器的測試了! 首先我們要先建立一個屬於它的測試檔案 (還記得之前有提過說測試檔案的名稱要是那個Co...
