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

from oyanglul.us

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

只需要 3 個(gè)理由

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

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

那么我們應(yīng)該有一個(gè) 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;

我們還需要一個(gè) 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;

--

自動(dòng) mock 實(shí)在是最大的亮點(diǎn), jest 重寫了 require, 所以你的代碼里的所有 require 來的東西都自動(dòng) mock.

因?yàn)樵谀愕臏y試中往往只關(guān)心一個(gè)模塊, 對(duì)于他的所有依賴其實(shí)都是無所謂的.

在例子中, 如果我們在測 repo.js 的時(shí)候完全不關(guān)心那兩個(gè) jquery 的 ajax 方法到底
寫對(duì)沒寫對(duì),反正我們期望能從 ajax 里面拿到我們想要的東西就對(duì)了. 因此, 我希望 jquery 的
所有方法都是 mock 的. jest 讓你很輕松的做到這點(diǎn), 因?yàn)槭亲詣?dòng)mock所有require 的東西, 而
對(duì)于目標(biāo)測試模塊, 只需要說我dontMock 我的目標(biāo)模塊就好了.

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);
  });
});

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

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

before 是我要進(jìn)行操作所需要的東西.

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

我要一個(gè)我要測的 Repo 類的實(shí)例

it 說明我關(guān)心地行為是神馬

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

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

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

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

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

我們不關(guān)心
- user 干了什么
- repo 干了什么

這樣,關(guān)心的就是不能 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");
    // 我們不關(guān)心 user, 但是我們希望他能返回一個(gè) deferred 類型
      user.fetch.mockReturnValue($.Deferred().resolve("dont care"));
    // 我們讓我們不關(guān)心的 user 和 repo 返回我們期望的東西就好
        user.name ="jcouyang";
        user.followers = 20;
        repo.name = "gira";
        repo.followers = 21;
    // 期待頁面上有一個(gè)  id 為 content 的元素
        document.body.innerHTML = "



";
    });

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

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

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

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

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: 這里暴露兩個(gè)函數(shù)
- setAjaxReturn: 可以設(shè)置我希望 ajax 返回的值
- ajax: 單純的返回這個(gè) thenable.

所以我也不需要顯示的聲明 mock jquery什么什么的, 直接在測試?yán)镌O(shè)置ajax 的返回值就好了.

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

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

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

promise: 使用 pit() 來測試 thenable 的對(duì)象, 比如 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 其實(shí)也是個(gè)概念, 推薦使用模塊化的思想, 這樣我只需要保證每個(gè)接口的 IO 正確, 就可以保證整個(gè)程序沒問題. 這樣劃分下來測試就會(huì)變得簡單到只需要關(guān)心當(dāng)然模塊的 IO 從而
可以 mock 掉所有其他依賴. 真正模塊化好的代碼單純的只用 jasmine 或者 mocha
都應(yīng)該是很好測的. 只是在這個(gè)概念之上省去了很多不必要的 mock 代碼, 因?yàn)橐?mock 的
依賴總是占大多數(shù)的, 而關(guān)心的, 往往只是那么一兩個(gè).