iT邦幫忙

2021 iThome 鐵人賽

DAY 1
2
Modern Web

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

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

嗨各位看官們,對~又是我! 這是第二次參加鐵人賽,除了要檢視自己是不是有進步以外,
也想把這一年來有學到的東西分享給大家 ! 上一屆鐵人賽寫了PHP後端框架-symfony,這次來點前端吧~
因為小菜鳥本人的公司用的是React,所以這次的主題訂了個 【用Jest和Enzyme來寫React測試 !!】
對React有興趣的朋友們可以看看,因為小菜鳥講的都是一些基本的概念而已


看主題就知道,看完了這三十篇文章,能學到的就是 React的基礎和測試框架Jest的應用及測試庫工具Enzyme的套用 , 這次主題是前端測試,所以冗長的前言講完後,前面幾篇會先從React的基礎概念開始講起,
JSX語法、Component、props、states、ref、propType的驗證,react的事件觸發...等等,
中間從則是會介紹測試的流程及方法還有上述的Jest和Enzyme,
最後就要開始來寫個簡單的測試並且讓我們的Code看起來更簡潔更乾淨,
寫完簡單的小測試後會往後延伸一點點點,寫個小小計數器來當作測試的對象吧~
React Component自己來,測試也自己來,這樣一整套下來,是否很有成就感!!!
覺得自己好像有長大了那麼一咪咪~


好啦小菜鳥的廢話有點多,是不是既期待又怕受傷害呢!,
我保證這次一定比那什麼PHP後端框架簡單!,那下一篇我們就來開始我們的測試之旅吧!!

對了!! 忘記一件很重要的事情,就是 這次開發的IDE使用的是 Visual Studio Code ( VS Code) ,
寫前端Code非常好用的IDE !

Visual Studio Code 官方載點


下一篇
【Day2】VsCode相關套件安裝及建立React專案和React的小小介紹!!
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
janlin002
iT邦好手 1 級 ‧ 2021-09-03 10:19:55

很期待你的文章,自己本身沒什麼寫測試的經驗,所以想透過你的文章更了解測試,想請問一下這次鐵人賽會講到redux測試的部分嗎?(action,reducer甚至middleware的部分)

Ivy iT邦新手 5 級 ‧ 2021-09-03 11:10:50 檢舉

您好~ 這次的測試不會講到redux的部分唷,是一些很基礎的測試,前面的React介紹也只是基礎,也沒有提到redux,但後續如果有多的篇幅可能會延伸 ~謝謝您的鼓勵 : )

janlin002 iT邦好手 1 級 ‧ 2021-09-03 11:32:14 檢舉

好的!謝謝你~
/images/emoticon/emoticon41.gif

我要留言

立即登入留言