使用 Jest 進行前端單元測試

Standard

去年底在公司分享了關於使用 Jest 進行前端單元測試的議題,簡報版本在此,現在將其整理為文章以方便日後查詢與閱讀。

前言

從事前端工作也幾年了,先前有諸多原因都未能在公司產品上實行單元測試,例如做功能都來不及了,哪有時間寫測試、程式寫的太過耦合難以測試之類的。

我以前只在個人的 side project 上寫過單元測試,也的確感受到「測試能夠減低重構時不致無意間把原有功能搞壞就釋出的風險」帶來的好處。而這次算是我第一次在公司產品上導入單元測試,在測試的領域還算是新手,這篇文章便作為新手的個人筆記,有什麼錯誤的部份請偷偷告訴我 🙂

再提一下情境:我們使用 React + Redux 進行 SPA (Single Page Application) 的前端網站開發,是前後端分離的開發模式,後端團隊出 JSON 格式的 API 給前端進行資料串接。在 Scrum 會議中 Story Refinement Meeting 開 Story 的 Sub tasks 都會特別開 Unit Test 實作的票。

Why Jest?

為什麼選擇 Jest 呢?跟最常拿來被比較的 Mocha 來說,從 Jasmine 發展而來的 Jest 本身對於 React 的整合度挺不錯的(而且是 Facebook 自家的,釋出與修正速度可靠許多),而且本身也整合好了斷言 (Assertion)、Mock 等 Library 以及 Coverage 報告功能,還有滿特別的 Snapshot 測試,以及優秀的 watch 模式可以只測試當次更改的檔案,最重要是它的設定頗好上手的。

Continue reading

近況與 React 初體驗

Standard

好一陣子沒有更新部落格了,年初到現在依然在渾沌瞎忙碌中度過,讓人有些倦怠,暫時沒寫文的靈感。

不過這篇也不是技術文,就當給蜘蛛網密佈的部落格澆個水吧…。

那麼,這陣子除了工作之外,還做了什麼呢?


參加 Modern Web 2015

距離上次 WebConf 2013 也好久了,參加這樣的大型研討會對我來說就是吸收新知,了解一下現在職場上大家都玩些什麼東西。

社交嘛…個性低調的我對在社群 social 總覺得彆扭不自在 XD 還是跟同行的朋友聊聊、交換筆記就好。

  • 最喜歡的場次:
    • 唐鳳 的 《開源之道》
       非技術場,但講到一些社群中人與人間相處、溝通的觀念相當有感觸呢,同理心、分享、尊重等等,在職場、交友上也很受用。

  • 前端相關場次:

    • 阿當 的 Pinkoi 把手機版網站變好用了
       WebConf 2013 中阿當 分享的場次 相當有收穫,這場關於 Pinkoi 手機版網站優化的經驗分享依然如此。
       雖說有些我已經有在工作中實做過了(例如 RESS、pushState、PageSpeed),但也有許多細節未曾注意到。
       在與設計師合作、給使用者更佳的體驗、前端效能細節方面,前端還有好多部分可以努力的,希望自己也能繼續往這方面精進。

    • Chris 的 從技術角度看 Responsive Web Design
       講者分享了許多 RWD 實作技巧,而其中講到跟 PM、設計師溝通這部分特別讓我會心一笑啊 XD
       我覺得設計師、PM 能擁有網頁基礎概念的話…,嗯,應該說是無論職務,都能對彼此的領域有所涉略、了解彼此的難處與需求的話,在實做產品上能夠有很大的幫助啊。(消弭認知落差、找到彼此合作的最佳解)

    • Eric Chuang 的 當網頁遇上原生 App
       由於我目前待的公司主要產品是 App,也曾有人提過想用網頁技術來實做 App 中的內容頁,「用網頁來做,覺得這樣成本比較低」,但身為第一線網頁前端開發才會了解 – 實際上其中血淚與坑的成本並不會比較低 XD
       看到簡報中介紹各家手機廠自幹 ─ “Improve” ─ 原生手機瀏覽器導致的後果與靈異事件,真的是心有戚戚焉(哭)。

針對這些前端場次,我也在公司的開發者分享時間做了個大補帖式的分享了 XD

不過比起 WebConf 2013,個人覺得這次有點小失望呢,大概是門票價格跟我想聽的場次(跟我聽得懂的 XD)沒有成正比吧 Orz


不定期的週末技術小聚會

前同事牽線下,認識幾位前端、設計師朋友,分享彼此在工作上遇到的前端心得與疑難雜症,另外聽聽不同公司對於前端開發上的做法也滿有幫助的,無論是好是壞。

因為身為從來沒掛過前端工程師職稱的前端工程師,在公司想不斷針對前端開發、設計議題討論,總是有種難逢知音的感覺。

也許這種前端朋友間的交流是另一種解決方式吧…


React 初體驗

實做在公司專案上

覺得一直瞎忙很難進步啊,另外也想追一下前端圈滿熱門的 React,觀察到前端人力市場這個技術需求越來越常出現了。

所以抽空自己默默研究了 React,並在公司專案的某功能實做看看。從原本用 Python 接公司 API 再於 template 印出的方式,改寫為 React 元件。另外因為公司案子要兼顧 SEO,所以就在 Server 上透過 python-reactpython-webpack 跑專案的 React 程式,讓內容是可被搜尋引擎蒐錄的。

實做完的心得是 – 所有東西都元件化,拆解,然後被 React 規範該怎麼寫元件的原則下,寫起功能來挺能專注的,回頭看也比較清晰明瞭。


寫了兩個 React Components

手法還很拙劣,未來進步再來改進。

不過真的有包元件包上癮的感覺 XD


最近大概就是這樣,依然是在瞎忙 loop 中找些讓自己過得有趣一點的方式(遠目

啊,轉眼 2015 的一半就這樣過去了…