Homepage
Open in app
Sign in
Get started
Enjoy life enjoy coding.
享受生活,從程式開始。
CSS
JavaScript
React
Jest
Design Pattern
Other
Coding Blog
GitHub
Follow
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
Javascript
TypeScript | 善用 Enum 提高程式的可讀性 - 基本用法 feat. JavaScript
TypeScript | 善用 Enum 提高程式的可讀性 - 基本用法 feat. JavaScript
Enum 是在 TypeScript 中增加的新語法,也被稱做「列舉」或「枚舉」,實務面會用它來管理多個同系列的常數(不可修改的變數),做為狀態的判斷所使用。 在 Web 中比較常見的狀態判斷,是在處理請求時,要針對不同的 Response status codes 做處理
神Q超人
Jul 7, 2019
TypeScript | 從 TS 開始學習物件導向 - Interface 用法
TypeScript | 從 TS 開始學習物件導向 - Interface 用法
Interface 就像在限定「 Class 內容」的存在,如上方說的,在 Interface 中,會描述 Method 或 Property 的名稱,但 Interface 不會也不能去實作這些功能,僅僅是要求使用該 Interface 的 Class 得這麼做,否則就會
神Q超人
Jun 30, 2019
TypeScript | 從 TS 開始學習物件導向 - Class 用法
TypeScript | 從 TS 開始學習物件導向 - Class 用法
類別就像一個設計圖,能透過它產生一個新物件,用 class 語法建立一張設計圖,裡面會有物件的資料,設計好後,使用 new 將物件建構出來,該物件就會擁有設計圖內設定的所有功能
神Q超人
Jun 23, 2019
TypeScript | 聽說 JavaScript 有什麼弱型別? TypeScript 的基本用法 ( I )
TypeScript | 聽說 JavaScript 有什麼弱型別? TypeScript 的基本用法 ( I )
JavaScript 仍然有辦法透過自身實現 interface , 但它所需要的工程可能比想像中的多,這時也許我們能夠回想 class 的出現為 JavaScript 操作 Prototype 帶來多大的改變,就能猜想 TypeScript 僅僅增加了 interface…
神Q超人
Jun 15, 2019
JavaScript | ES6 中最容易誤會的語法糖 Class - 基本用法
JavaScript | ES6 中最容易誤會的語法糖 Class - 基本用法
這些差別都是取決於物件導向是基於 Class 或 Prototype ,因此就算 ES6 新增了一個 Class 保留字用來當 Constructor 創建 Instance ,也不代表它物件導向的方式會變成 Class-Based , 只是被 Class 包裝的…
神Q超人
May 26, 2019
JavaScript | 關於 Object ,一口氣全說完
JavaScript | 關於 Object ,一口氣全說完
前言本篇文章的內容會分成幾個部分講解: Object (物件) this(物件執行環境) Property attributes(特性屬性) Prototypal inheritance (原型繼承) Constructor (建構器) Constructor in
神Q超人
Mar 17, 2019
JavaScript | WebSocket 讓前後端沒有距離
JavaScript | WebSocket 讓前後端沒有距離
WebSocket 是網路協定的一種, Client 可以透過此協定與 Server 做溝通,而他和一般 http 或 https 不同的是, WebSocket 協定只需透過一次連結便能保持連線,不必再透過一直發送 Request 來與 Server 互動!
神Q超人
Feb 23, 2019
React
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
About Enjoy life enjoy coding
Latest Stories
Archive
About Medium
Terms
Privacy
Teams