摘要：的測試不管在用還是都是很頭疼的事情但是自從有了一口氣寫個測試腰也不疼了頭也不疼了只需要個理由在說用測為什么好之前我們先來看我們要測的一個例子栗子比如我要寫一個模塊要去取用戶的和他所有的數(shù)量那么我們應該有一個的我們還需要一個的大同小異略去最后

from oyanglul.us

Javascript 的測試, 不管在用 jasmine 還是 mocha,
都是很頭疼的事情. 但是自從有了 jest, 一口氣寫7個測試, 腰也不疼了, 頭也不疼了.

只需要 3 個理由

在說用 jest 測為什么好之前,我們先來看我們要測的一個例子.

比如我要寫一個模塊要去取github 用戶的follower 和他所有 repo 的 follower 數(shù)量.

那么我們應該有一個 User 的 Model.

// user.js
var $ = require("jquery");
function User(name) {
  this.name = name;
  this.followers = 0;
}
User.prototype.fetch = function(){
  return $.ajax({
    url: "https://api.github.com/users/" + this.name,
    method: "get",
    dataType: "json"
  }).then(function(data){
      this.followers = data.followers;
  }.bind(this));
};
module.exports = User;

我們還需要一個 repo 的 model, 大同小異略去

最后, 整合這倆我要的東西, 并顯示在頁面上

// follower.js
var $ = require("jquery");
function followerOf(user, repo) {
  user.fetch().then(repo.fetch).then(function(_){
    $("#content").text(user.name +""s followers: " + user.followers +
                       " and his repo "+ repo.name +""s followers:" + repo.followers);
    });
};

module.exports = followerOf;

--

自動 mock 實在是最大的亮點, jest 重寫了 require, 所以你的代碼里的所有 require 來的東西都自動 mock.

因為在你的測試中往往只關心一個模塊, 對于他的所有依賴其實都是無所謂的.

在例子中, 如果我們在測 repo.js 的時候完全不關心那兩個 jquery 的 ajax 方法到底
寫對沒寫對,反正我們期望能從 ajax 里面拿到我們想要的東西就對了. 因此, 我希望 jquery 的
所有方法都是 mock 的. jest 讓你很輕松的做到這點, 因為是自動mock所有require 的東西, 而
對于目標測試模塊, 只需要說我dontMock 我的目標模塊就好了.

jest.dontMock("../repo");
describe("Repo Model", function(){
  var repo;
  beforeEach(function(){
        var $ = require("jquery").setAjaxReturn({stargazers_count: 23});
        var Repo = require("../repo");
    repo = new Repo("jcouyang", "gira");

    });

  it("should populate properties with data from github api", function(){
        repo.fetch();
        expect(repo.followers).toBe(23);
  });
});

所以這個測試看起來就跟文檔一樣了,

dontMock("./repo") 說明我關心repo
這個模塊, 其他我都不 care.

before 是我要進行操作所需要的東西.

我要 jquery ajax 請求給我想要的數(shù)據(jù)

我要一個我要測的 Repo 類的實例

it 說明我關心地行為是神馬

我關心 fetch 的行為,是去取數(shù)據(jù)并給我把數(shù)據(jù)填充到我的 repo 實例中

  
你可能要問 segAjaxReturn 是哪里冒出來的. 忍一忍稍后告訴你.

有沒有看雖然我顯式的 mock jquery, 但是 Repo 里面 require 的 jquery 其實是假的, 不然我們就真的訪問
github api 了. 那樣就不會每次都返回 23 個 follower 了.

好了現(xiàn)在我們來測 follower.js, 先看 follower 到底干了什么, 拿到 user 和 repo
的信息然后組成一句話放到頁面 id 為 content 的元素下面.

好, 所以我們關心
- 組出來的話對不對
- 有沒有放到 content 元素下, 所以 jquery 的操作對不對也是我們關心的一部分

我們不關心
- user 干了什么
- repo 干了什么

這樣,關心的就是不能 mock 的

jest.dontMock("../follower")
    .dontMock("jquery");
describe("follower", function(){
  var user, repo, follower;
    var $ = require("jquery");
  beforeEach(function(){
        var Repo = require("../repo");
        var User = require("../user");
        follower = require("../follower");
        user = new User("jcouyang");
    repo = new Repo("jcouyang", "gira");
    // 我們不關心 user, 但是我們希望他能返回一個 deferred 類型
      user.fetch.mockReturnValue($.Deferred().resolve("dont care"));
    // 我們讓我們不關心的 user 和 repo 返回我們期望的東西就好
        user.name ="jcouyang";
        user.followers = 20;
        repo.name = "gira";
        repo.followers = 21;
    // 期待頁面上有一個  id 為 content 的元素
        document.body.innerHTML = "



";
    });

  it("should populate properties with data from github api", function(){
        follower(user,repo);
    // 希望 content 上能得到想要的內容
        expect($("#content").text()).toBe("jcouyang"s followers: 20 and his repo gira"s followers:21");
  });
});

好了, 說好的解釋 setAjaxReturn是怎么回事的

嗯嗯, 是這樣的, 雖然 jest 自動 mock 了我們不關心的模塊, 但是我們還是會希望
這個 mock 的玩意能有一些我們期望的行為, 也就是按我們的期望返回一些東西. 比如
這里就是我們不關心 ajax 的邏輯, 但是我們需要他能給我們返回一個東西,并且可以
thenable. 所以單純的 mock 對象或函數(shù)都不能做到, 所以有了 manual mock 這種東西.

用 manual mock 需要建一個__ mocks__ 文件夾,然后把所有的 mock 都扔進去. 比如
我想 mock jquery, 那么我建一個jquery.js 扔進去

var data = {};
var mockDefered = function(data){
    return {
        then: function(cb){
            return mockDefered(cb(data));
        }
    };
};

function ajax() {
  return mockDefered(data);
}

function setAjaxReturn(shouldbe){
    data = shouldbe;
}
exports.setAjaxReturn = setAjaxReturn;
exports.ajax = ajax;

終于看見setAjaxReturn在哪里定義了:sweat_smile: 這里暴露兩個函數(shù)
- setAjaxReturn: 可以設置我希望 ajax 返回的值
- ajax: 單純的返回這個 thenable.

所以我也不需要顯示的聲明 mock jquery什么什么的, 直接在測試里設置ajax 的返回值就好了.

var $ = require("jquery").setAjaxReturn({stargazers_count: 23});

這是 repo 里面 require 的 jquery 已經(jīng)被 mock 并且只要掉 ajax 都會返回我
期望的值.

并行測試:
還用說么, 既然已經(jīng)如此模塊化好了, user repo 以及 follower 的測試完全是互不依賴.
沒有什么理由一個一個測. 因此3個測試的耗時取決于最長時間的那個. 所以如果有
那個測試特別耗時,說明模塊還不夠細, 多拆幾個就快了.

promise: 使用 pit() 來測試 thenable 的對象, 比如 repo 的例子,就 keyi
寫成

pit("should populate properties with data from github api", function(){
  return repo.fetch().then(
    expect(repo.followers).toBe(23);
  );
});

Timer mocks: 可以使用 mock 的 timer 和 ticks, 也就是你可以加速
所有的setTimeout, setInterval, clearTimeout, clearInterval行為. 不需要等待.

setTimeout(function() { callback(); }, 1000);
 expect(callback).not.toBeCalled();
 jest.runAllTimers();
expect(callback).toBeCalled()

所以說白了, jest 其實也是個概念, 推薦使用模塊化的思想, 這樣我只需要保證每個接口的 IO 正確, 就可以保證整個程序沒問題. 這樣劃分下來測試就會變得簡單到只需要關心當然模塊的 IO 從而
可以 mock 掉所有其他依賴. 真正模塊化好的代碼單純的只用 jasmine 或者 mocha
都應該是很好測的. 只是在這個概念之上省去了很多不必要的 mock 代碼, 因為要 mock 的
依賴總是占大多數(shù)的, 而關心的, 往往只是那么一兩個.