「CI集成」基於Jest Mock API對業務邏輯集成測試【附源碼】

「CI集成」基於Jest Mock API對業務邏輯集成測試【附源碼】

二哲 web前端開發

你bf有時候咱們須要不發送請求就能完成前端的業務邏輯測試，而許多的業務邏輯都會須要調用到後端的API接口。那如何能mock咱們所須要的data就是一個問題。當咱們能有一個良好的測試環境以後，只要保證後端的接口沒有問題，那咱們就能夠保證業務邏輯也沒有問題。

因此咱們對API的集成測試有如下幾個要求
1.不發送請求，返回本地假數據
2.發佈前經過CI跑unit test，經過則發佈上線

如何實現？

首先通常咱們在network部分都會進行封裝，假設在project中封裝了以下的請求工具

既然咱們不能發送真實請求，那咱們就須要相似能攔截的東西，攔截也能夠經過mock代替。因而咱們能夠經過jest.mock方法來作。

jest.mock

這個就是jest.mock的做用。

內容開始

明白了這個後就好辦了。項目目錄以下：

而咱們的fake文件其實主要作的事情就是根據請求url，method，status等，去讀取對應的本地假數據。大體以下。

mockData文件夾則就是放咱們的假數據，在這咱們能夠假設定義以下數據結構，來模擬咱們的response。

最後看下咱們的 unit test 如何寫

實現了這個有什麼用？

假設/user接口返回得數據多是這樣

而咱們前端service層爲UI層提供了一個initUserData的方法，initUserData方法裏的操做是當age爲18，那就要返回19。
因此咱們在Jest則能夠直接這樣測試。

這樣咱們使用Jest就能夠完成對業務邏輯的測試，Unit test在大型項目中很是須要，每當提交一個feature時，能夠跑完全部測試，會讓你很是有安全感，極大提高了項目的穩定性。

TIP

真正的方法（http），與mock的方法http，文件必須同名，而後放在mocks文件夾下便可。若是不一樣名使用jest.mock()則會失敗。

以上例子源碼請自行下載學習：
連接: https://pan.baidu.com/s/1QyI8ayo3EHD3xfwTUkRDlg 密碼: 1jq4