iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

React 前端工程師的兩把刷子 系列

主線預計會寫「TypeScript」以及「React 前端測試」有關的內容。支線則是會根據當天所學到或看到的內容來即時分享。

鐵人鍊成 | 共 30 篇文章 | 99 人訂閱 訂閱系列文 RSS系列文 團隊鐵人賽臻融一
DAY 21

[Day21] Conditional Chains

雖然昨天說 TypeScript 已經差不多,但其實還有一個(或一些?)還沒寫到。我們來看一段程式碼: 上面這個是在 React 中的一段型別定義,今天沒有要...

2021-10-06 ‧ 由 pjchender 分享
DAY 22

[Day22] React x TS 中的 Event Handler

今天來分享一個小東西,記得以前一開始用 React 搭配 TypeScript 開發專案的時候,在寫 Event Handler 的時候,常常會碰到不知道 E...

2021-10-07 ‧ 由 pjchender 分享
DAY 23

[Day23] TS:談談讓人又愛又恨的 enum

在 TypeScript 中,enum 算是還蠻常會使用到的型別,但有時如果用的不好或觀念不夠清楚的話,就會有點痛苦而不知所以然。 以下面這個 GENDER...

2021-10-08 ‧ 由 pjchender 分享
DAY 24

[Day24] 談談寫測試的好處:從為你自己寫測試開始

前幾週主要都在談 TypeScript,對我來說 TypeScript 最重要的是能增加程式的可維護性,就和 ESLint 一樣,用或不用程式都能運行,一開始用...

2021-10-09 ‧ 由 pjchender 分享
DAY 25

[Day25] 測試一定要寫好寫滿?時間有限怎麼辦?

既然要寫測試,就先來了解前端常見的幾種測試類型,從最大家最常聽到的單元測試(Unit Testing)、到會整合不同 API 或元件互動的整合測試(Integr...

2021-10-10 ‧ 由 pjchender 分享
DAY 26

[Day 26] 快照測試(Snapshot Testing)是什麼?什麼時間適合使用?

快照測試第一時間聽起來好像是會「幫我們的畫面做一個快照,紀錄下來當時的畫面」,但這樣的說法對也不對,今天就讓我們來了解一下所謂的快照測試(Snapshot T...

2021-10-11 ‧ 由 pjchender 分享
DAY 27

[Day27] 建立 Mock Module / Function 的方式(ft. TypeScript)

今天來談談 Mock Module / Function 的部分。Mock Function 是在 Jest 中非常強大的功能,它可以模擬某個函式會回傳的值,...

2021-10-12 ‧ 由 pjchender 分享
DAY 28

[Day28] 測試依賴外層 Context Provider 的 React 元件:客製化 render 函式

昨天提到可以用 Mock Module 的方式來模擬函式或套件的回傳值,但有些時候情況沒那麼單純,例如當我們有使用 react-router-dom、redux...

2021-10-13 ‧ 由 pjchender 分享
DAY 29

[Day29] React Testing Library 的一些實用的小技巧

今天來談談 React Testing Library 中筆者常用到的一些功能,React Testing Library 的套件名是 @testing-lib...

2021-10-14 ‧ 由 pjchender 分享
DAY 30

[Day30] 淺談重構(refactoring)與兩把刷子

鐵人賽的最後一天,讓我們先來簡單的聊聊重構,這部分是筆者之前在看「大規模重構」這本書時整理的內容,目前只看了前幾章,所以能分享的還很有限,但到目前為止我很喜歡作...

2021-10-15 ‧ 由 pjchender 分享