https://github.com/aszx87410/api-mocking-demo-app
簡單介紹 MSW 與 MirageJS
⽤用 API mocking 讓前端不再苦苦等待huli[email protected]
View Slide
https://blog.huli.twOneDegree 資深前端⼯工程師
前端後端 APIUser
前端後端 APIUser「我要等後端好才能開始接喔」
該怎麼處理理這個狀狀況?
如果後端連 interface都還沒定好...
http://www.quickmeme.com/meme/3rwr8s
幾個⽅方法• 不管,繼續等待後端
幾個⽅方法• 不管,繼續等待後端• Express ⾃自⼰己弄弄
幾個⽅方法• 不管,繼續等待後端• Express ⾃自⼰己弄弄• JSON server 假資料
幾個⽅方法• 不管,繼續等待後端• Express ⾃自⼰己弄弄• JSON server 假資料• MSW• MirageJS
登入⾴頁⾯面後台⾴頁⾯面是否有 token是POST /login成功之後把 token 寫進 localStorage並導到後台否,輸入帳號密碼
登入⾴頁⾯面確認localStorage後台⾴頁⾯面 GET /me登入⾴頁⾯面沒 token有 token失敗是否有 token是POST /login成功之後把 token 寫進 localStorage並導到後台否,輸入帳號密碼清除 localStorage
MSWMock Service Worker
前端網站API Server
前端網站 ServiceWorkerAPI Server瀏覽器
設定步驟• 加上 service worker• 加上 handler
還可以針對各種狀狀況寫測試!
Mirage JS
前端網站 fetchXHRAPI ServerJavaScript
寫測試?當然沒問題
mirage 的強項
總結cy.route msw mirage使⽤用在開發上 X O O使⽤用在測試上 O O O特⾊色 cypress 內建使⽤用 service worker打造出完整的mock api缺點 只能⽤用在測試設置較⿇麻煩適合放靜態資料需要較多時間