APP測試的極簡Mock方法——Mock服務端介面

本文適用的場景：在對移動端APP的純移動端功能或者前端H5頁面的純前端功能進行測試時，服務端介面返回的資料不滿足要求，或者製造測試資料比較複雜，需要使用Mock方法來快速構造資料。

Mock這個單詞有模擬、效仿的意思，在軟體開發中，通常指一個模擬的物件。這個模擬物件是真實物件的替代品，有了Mock，團隊成員之間可以並行工作，而不必等待需要依賴的其他介面完成後才能開始工作。

• 在開發階段，尤其是聯調之前，Mock經常被開發人員用來進行除錯；
• 在測試階段，測試人員也可以用Mock提高我們的測試效率，不止在單元測試的測試指令碼中可以應用，也可以應用在系統級別的測試上；

那怎麼進行服務端介面級別的Mock呢，非常簡單，只需要兩個工具：

• 抓包工具Charles
• Easy Mock

Charles是一款抓包工具，我們要用Charles做移動端APP的代理，目的是為了把Request路由到Easy Mock的介面上，得到我們的Mock資料。

Easy Mock是一個視覺化、能快速生成模擬資料的持久化服務，正如其名，Easy Mock能使Mock變得非常簡單，令使用者愛不釋手。

---

下面開始進入正題，Mock服務端介面的步驟如下：

1、Easy Mock建立介面

Easy Mock有著非常友好的視覺化介面，操作起來非常簡單。進入Easy Mock官網後，首先建立一個專案，一個專案包含若干個介面，我們最終模擬的是介面。

（1）我們建立了一個命名為test的專案，如下圖，這個專案的基礎url是/api。

（2）接下來，建立介面，如下圖，左邊是我們想要構造的介面返回的JSON資料，右邊是這個介面的配置。

（3）將這個介面補充完成，如下圖，這個介面配置的URL是/index/v6，實際的URL就是/api/index/v6，也就是父路徑是這個介面所屬的專案的基礎URL。

（4）建立完成後，點選預覽，這個介面就可以被訪問了，完整的URL是https://www.easy-mock.com/mock/5b6ce6ccbf1ebd4a1974c563/api/index/v6#!method=get，我們把最後的#!method=get去掉，依然可以正常訪問，所以這個URL就是我們的移動端APP應該去請求的介面。

本次進行Mock的場景是服務端介面已經存在，但是資料不滿足要求，所以Response是通過Charles裡的Copy Response複製到輸入框裡，然後在這個基礎上做修改，這樣比完全創造Response要簡單得多。

現在， 要解決的問題就是怎麼讓移動端APP的請求重定向到這個URL上，就可以得到我們想要的Mock資料了。

2、Charles修改路由（Map Remote）

（1）我們把Charles設定成移動端APP的代理伺服器，這樣可以攔截到請求，再借助Charles的Map Remote功能，就可以把請求重定向到我們的Easy Mock的URL上。

(2)我們用移動端APP來請求這個介面，通過Charles可以看到，移動端APP的請求URL從http://backend.test.env/api/index/v6重定向到了https://www.easy-mock.com/mock/5b6ce6ccbf1ebd4a1974c563/api/index/v6這個介面上，而我們的請求引數query都完整地帶著。

這樣，移動端APP就能收到我們的模擬資料了，通過修改Easy Mock的JSON，可以很輕鬆地Mock我們想要的資料。

---

Easy Mock的簡單介紹

在上面的方法中，我們是通過手動的方式修改Easy Mock的Response，實際上，Easy Mock還支援一些比較好的特性，可以引入在單元測試的自動化測試指令碼中，比如：

• Mock.js，支援生成隨機的資料、支援擴充套件更多資料型別、支援自定義函式和正則；
• 支援基於Swagger建立專案，以節省手動建立介面的時間；
• 通過Easy Mock CLI可自動生成API；
• 支援通過請求物件編寫邏輯，實現響應式資料，支援自定義響應；
• 支援RESTful；

具體可移步到Easy Mock的官方文件進行查閱。