Homepage
Open in app
Sign in
Get started
Enjoy life enjoy coding
CSS
JavaScript
React
Jest
Design Pattern
Other
Coding Blog
GitHub
React
React Unit Test | React 的 Route 單元測試 feat. Jest, react-testing-library
React Unit Test | React 的 Route 單元測試 feat. Jest, react-testing-library
就 router 執行的過程來說,當使用者點擊頁面中的連結時,router 會改變,然後 render 出符合 path 的 component,流程簡單說大概是這樣子,那問題來囉!在上述幾個部分,使用者會在乎的是什麼呢?
神Q超人
Nov 27, 2019
React Unit Test | 為執行細節寫下測試(翻譯)
React Unit Test | 為執行細節寫下測試(翻譯)
當你在測試時,如果為 Component 的任何一個你所能察覺的每個細節寫下測試,會為測試本身帶來哪些問題!相信讀完這篇文章,會更能理解 Kent C. Dodds 在創造 react-testing-library 的時候思考了什麼!
神Q超人
Nov 23, 2019
React Unit Test | 測試 Component 時什麼才是最重要的?
React Unit Test | 測試 Component 時什麼才是最重要的?
本篇要和大家分享的內容源自於 這個問題,問題內容主要是 「當使用 react-testing-library 測試 component 的時候,該怎麼取得或確認 state 的值呢?」(註一) 雖然作者是以 react-testing-library 這個測試框架的角度發問,但
神Q超人
Nov 19, 2019
React Unit Test | 讓你的 UI 測試適應變化(翻譯)
React Unit Test | 讓你的 UI 測試適應變化(翻譯)
只要我們想像並模擬使用者操作系統的方式寫下測試,不僅可以讓測試更適應 UI 的變化,也能讓測試為你帶來更多價值
神Q超人
Nov 14, 2019
React Redux | 小孩子才做選擇! Hooks 和 Redux 我全都要!
React Redux | 小孩子才做選擇! Hooks 和 Redux 我全都要!
簡單使用了 useSelector 和 useDispatch 兩個 Hooks,就把當初寫了兩篇文章的內容通通實作出來,而且程式碼還更簡潔直覺,且明顯能感覺到差異的是 Component 不需要再經過 Connect 了!
神Q超人
Jul 29, 2019
TypeScript | 當 TypeScript 遇上 React 的超級聯名 TSX 款
TypeScript | 當 TypeScript 遇上 React 的超級聯名 TSX 款
其實標題應該是反過來了,因為我是先將擁有一套完整的 React 專案架構,再硬是將 TypeScript 加進專案中,所以應該是 React 遇到 TypeScript 才對。 本文就是要記錄下過程,希望能給想導入 TypeScript 的 React 工程師一個小參考
神Q超人
Jun 16, 2019
Redux Saga | Redux 界的非同步救星 - 基本用法
Redux Saga | Redux 界的非同步救星 - 基本用法
寫法輕鬆又直觀,一眼就能看出在做什麼,但是 fetch 需要搭配 Promise 做回傳資料的處理、 data 可能還未拿到資料就 dispatch 之類的種種因素下,這樣真的可以嗎? 可以的,只要擁抱 Saga 一切都會變得容易
神Q超人
May 23, 2019
Jest | 再一次測試你的 Component - feat.react-testing-library 基本用法
Jest | 再一次測試你的 Component - feat.react-testing-library 基本用法
Counter 是透過 Hooks 的 useState 管理 State ,也就是說 react-testing-library 百分之百完美相容 Hooks ,測試起來絕對不會有問題! 顯然這是個令人開心的消息,但 Redux 呢?
神Q超人
May 9, 2019
Jest | 將 Unit Test (單元測試)導入 Redux 專案 — feat.React, Enzyme
Jest | 將 Unit Test (單元測試)導入 Redux 專案 — feat.React, Enzyme
在上篇文章裡簡單解釋了如何對 Component 做 test ,但現實裡要在現有專案中導入 Unit Test 卻沒那麼簡單,測試的項目除了 Component 外,往往還有一些在 React 生態圈內的其他套件,例如 Redxu ,剛好,今天就來嘗試在 Redux…
神Q超人
Apr 27, 2019
Jest | 經過測試,讓你的組件安全有把關 shallow render 篇 - feat.React, Enzyme
Jest | 經過測試,讓你的組件安全有把關 shallow render 篇 - feat.React, Enzyme
Component 中不只會有邏輯,還有 Html 的結構、 Props 的值、管理的 State 、甚至是 Click 或 Change 事件要執行等等,因此在這裡筆者選擇使用 Enzyme 搭配 Jest 為 Component 做測試。
神Q超人
Apr 6, 2019
React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux
React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux
在 Hooks 剛出現時,我也曾經思考過「 Redux 到底還有沒有用?」,雖然現在已經有了自己的一套看法,但始終沒有使用過 Hooks 實作過 Redux ,因此花一些時間實作,並讓這篇文章誕生。
神Q超人
Mar 24, 2019
React | 在 React 中使用 WebSocket - feat. Socket.io 基本教學
React | 在 React 中使用 WebSocket - feat. Socket.io 基本教學
socket.io 分成兩個主要的部分,一個是負責在 Server 端啟動 WebSocket 服務的 socket.io 和在 Client 端做連結處理的 socket.io-client ,因此使用時便不需要再尋找需要哪些套件,一切都交給socket.io 就行了!
神Q超人
Mar 7, 2019
React | 為了與 Hooks 相遇 - Function Components 升級記
React | 為了與 Hooks 相遇 - Function Components 升級記
Hooks 的出現,改變了 Function Components ,讓他擁有專屬的 useState 來管理狀態及 useEffect 的生命週期。 兩種版本呈現的結果都一樣,差別在於設置及修改 State 的部分使用 Hooks 創建,需要注意的是 Hooks …
神Q超人
Feb 10, 2019
About Enjoy life enjoy coding
Latest Stories
Archive
About Medium
Terms
Privacy
Teams