iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

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

Day 2 我要開始學了

Hi 大家好~ 在這邊平常我列出我最近想學跟正在學的一些技術

  1. React Testing Library
  2. Cypress(如果有時間摸的話)

雖然寫程式大家可能會做Error First的例外處理,但假如沒有做的話,會不會有時候會因為input的資料導致功能產生錯誤的結果,但有時候也會不爽的就是更改功能或元件測試就不會過拉,這時候就要解決問題把測試案例砍掉XDDD.

言歸正傳寫測試不僅是可以確保當統一的測試案例進來我們的功能還能正確地執行,當有錯誤可能是別人的問題A_A可以丟包給別人.啊為什麼我想學寫測試是因為以前的公司有導入測試(jest, enzyme),但是我一直沒真正好好的學,而且CRA(Create-React-App)都內建了就是說建議你學了!到底要不要學?學啊.所以想趁這次機會好好的研究測試,前端測試主要是分為三種測試,分別是單元測試(Unit Tests)、整合測試(Integration Tests)、端對端測試(End-To-End Tests).

單元測試(Unit Tests)

Jest

先從元件的最基礎的單元測試開始,此部分會專注於程式的最基礎,功能(functions)、元件類別(classes)做測試.且單元測試是針對獨立(independent)的單一元件做隔離(Isolation)測試並不會對其他元件有相依性的問題.僅需要針對output是否為expect(預期)的結果來當作驗證結果.

整合測試(Integration Tests)

React Testing Library、Enzyme

這部分就會牽扯到兩個以上的元件或功能互相影響,舉例來說可能需要Mock Data來當作render DOM的資料依據,或者是元件需要與context、redux之類的store做資料的匯流,因此同時需要reducer的資料整理以及component 渲染出的dom資料畫面是否為正確的,在這方面因涉及的元件相較於單元測試牽扯更廣,因此需要花更多時間除錯.

端對端測試(Ene To End Tests)

Cypress、Puppeteer、Selenium

這部分測試是最昂貴也是最複雜的,大家可以看我上面貼的測試金字塔,由下而上,所花的時間與金錢都是網上遞增,但E2E測試是真正模擬使用者使用瀏覽器行為的模擬測試,例如使用者點了什麼連結連到哪個頁面等等


上一篇
Day 1 唸完了還是不會
下一篇
Day 3 我要開始Mock了
系列文
我不會測試,所以寫Jest與React Testing Library30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Ken Chen
iT邦新手 4 級 ‧ 2021-09-18 10:14:53

React Testing Library
期待期待~~~~
敲碗 Day3

我要留言

立即登入留言