iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

我不會測試,所以寫Jest與React Testing Library 系列

開頭,大家都希望自己的元件或者是功能能達到robust的境界,偏偏我們常常沒有時間寫或是覺得很難,加上之前公司使用的enzyme支援度也沒有到很高.所以趁這次好好學習,如果時間許可的話,希望能為Cypress寫個幾篇篇幅.

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文 團隊Web 實驗室
DAY 21

Day 21 來開始介紹Cypress

今天來介紹一套End-To-End(E2E)testing的framework叫cypress,當我們每次寫完程式並上版之後可能會進到另一個開發階段給QA人員做...

2021-10-06 ‧ 由 史丹毛 分享
DAY 22

Day 22 來寫一個簡單e2e測試

今天我們來寫一個簡單的form來當作測試吧,首先我們刻出一個簡單的畫面 const App: FC = () => { const { handleC...

2021-10-07 ‧ 由 史丹毛 分享
DAY 23

Day 23 來驗證一下路由吧

那今天我們來聊聊,怎麼透過cypress來驗證url的路徑吧,重回昨天的範例,我們想要透過一個按鈕,切換到別的page,那react怎麼改變,可能透過histo...

2021-10-08 ‧ 由 史丹毛 分享
DAY 24

Day 24 cypress取得mock的回傳資料

今天我們來針對API call來進行模擬,因為測試畫面不一定都只是點選之類的模擬測試,這時候我們可能需要透過axios或者是fetch的方式取得server回傳...

2021-10-09 ‧ 由 史丹毛 分享
DAY 25

Day 25: 那我們來用cypress call api吧

在前面的單元測試部分與前一天的Cypress我們都講到使用假資料來,我們不一定隨時都是使用mock一個假資料(fake data)來當作測試,可能會在某個bet...

2021-10-10 ‧ 由 史丹毛 分享
DAY 26

Day 26: 出門前的Cypress 雜記

今天一早要出門,所以就大概講一下常用的一些小撇步以及昨天有講到的commands. 大家怎麼去抓取DOM元素 cy.contains() → 搜尋字串 這個我...

2021-10-11 ‧ 由 史丹毛 分享
DAY 27

Day 27:我們又回來了redux

來最後幾天我們又跳回去React-Testing-Library XDDD 相信還是有很多公司使用redux來當作global store來使用,因此最後幾天我...

2021-10-12 ‧ 由 史丹毛 分享
DAY 28

Day 28: 初始化要測試的component

來,今天我們來聊一下怎麼幫redux在測試時添加初始化的狀態資料,借用昨天的程式,並增加store的code. // strore.js import { c...

2021-10-13 ‧ 由 史丹毛 分享
DAY 29

Day 29: 來講一下commit前的小撇步

今天來講一些使用套件來方便我們做自動化的一些流程,今天要提的是lint-staged與husky. 首先先安裝 yarn add -D lint-staged...

2021-10-14 ‧ 由 史丹毛 分享
DAY 30

Day 30: 給之後的時間

Hi all 謝謝KK那邊認識到大家,可以一起組讀書會、一起參加鐵人賽. 鐵人賽很煩,因為我去年第一天就陣亡了. 無論如何,自己在工程師這條路一直在思考我適合嗎...

2021-10-15 ‧ 由 史丹毛 分享