iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

用Jest和Enzyme來寫React測試吧!! 系列

這次的三十篇會跟大家分享React的基礎及測試框架JEST和測試工具庫Enzyme,
會使用Visual Studio Code 這個IDE來進行操作
前十篇會介紹一些React的基礎,後二十篇會介紹使用測試框架。
看完這三十篇的最終目標是.....=>建立一個小組件並對其進行測試!
能學習到React的基礎知識及前端測試的基本概念!

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文
DAY 1

【Day1】下載VsCode來開啟我們的前端測試不歸路吧(╬•᷅д•᷄╬)

嗨各位看官們,對~又是我! 這是第二次參加鐵人賽,除了要檢視自己是不是有進步以外,也想把這一年來有學到的東西分享給大家 ! 上一屆鐵人賽寫了PHP後端框架-sy...

2021-09-01 ‧ 由 Ivy 分享
DAY 2

【Day2】VsCode相關套件安裝及建立React專案和React的小小介紹!!

上一篇有提到說,這次使用的IDE是超級好用的VsCode,相信各位看官們也都下載好了 安裝完畢,打開後會長這樣 ↓ 紅色的圈圈點下去就是可以下載套件的地方了...

2021-09-02 ‧ 由 Ivy 分享
DAY 3

【Day3】React的基本結構與概念,地基打好才可以蓋房子R ʕ •̀ o •́ ʔ

React 簡單來說是由三個部分組成的 Components (元件) =>可以看作是組成網站的各個區塊 Props => 父類別向下傳的屬性 S...

2021-09-03 ‧ 由 Ivy 分享
DAY 4

【Day4】Eslint設定及JSX表達式介紹,乾淨整齊的程式碼才能使人輕鬆讀懂!(๑¯◡¯๑)

在說明JSX前,先來提一個規則 EsLint !! Eslint 是用來檢測Code的標準及是否違規,而這些規定其實可以在設定檔可以自行設定 為了讓我們...

2021-09-04 ‧ 由 Ivy 分享
DAY 5

【Day5】來了解一下Component的建立和使用方法吧!! ٩(●˙▿˙●)۶…⋆ฺ

React Component是什麼概念呢!? 就是很像把東西組成起來的元件 => 比如汽車的引擎、汽車的車殼、汽車的輪胎組成汽車 那網頁也是會分成很多的...

2021-09-05 ‧ 由 Ivy 分享
DAY 6

【Day6】Props和States之間到底是什麼關係!? 怎麼傳怎麼用咧..? o_O ||

這篇要來談React的states跟Props States跟Props可以看作是React裡面的Attributes (參數) 這邊先來看小菜鳥畫的一張圖 ↓...

2021-09-06 ‧ 由 Ivy 分享
DAY 7

【Day7】試著用JSX在頁面上渲染出Table吧٩(๑❛ᴗ❛๑)۶

前面在第四篇的時候有稍微說明JSX是什麼東西和有什麼優點, 這一篇我們要來試著使用JSX 在React裡面 來渲染出一個Table !! 在我們印象中的Tabl...

2021-09-07 ‧ 由 Ivy 分享
DAY 8

【Day8】 將Function當成state傳給子類別套用在事件上吧≖‿≖

相信各位看官們很熟悉各種Html的Events事件,這篇呢~我們要透過上一篇所提到的State傳入子類別的方式套用再Event上面! 首先,我們先在Com...

2021-09-08 ‧ 由 Ivy 分享
DAY 9

【Day9】React Proptype的驗證及套用方法看這裡 ! ٩(●˙▿˙●)۶…⋆ฺ

如果我們想要強迫傳來的Prop是某種型態或是強迫某個Prop一定要被傳入的話, 我們可以使用PropType這個Reactj外部套件來作驗證 首先呢先來執...

2021-09-09 ‧ 由 Ivy 分享
DAY 10

【Day10】會襄在DOM上面的Ref (•ิ_•ิ)?

Ref 其實就是 Reference(參考)的意思,也就是傳值和傳址裡面的址 (參考位址) 我們的Ref 是會襄在DOM上面的,目的是可以拿取、參照DOM相對應...

2021-09-10 ‧ 由 Ivy 分享