Jest 是當(dāng)下最主流的前端測試框架；對于初學(xué)者，Jest 配置入門并不算友好，尤其是選擇了 Typescript 做開發(fā)語言，教程很煩瑣。我最近試了一個叫 ts-jest 的預(yù)處理庫，配置非常簡單，一共就三步，這里推薦給大家。

安裝

我們從空白 node 項目開始——這里以 yarn 為例——安裝依賴：

yarn add -D jest typescript ts-jest @types/jest

主要就是四個庫： jest、typescript自不必說，ts-jest是要用到的預(yù)處理器，@types/jest用于測試框架的類型推斷。

生成配置

yarn ts-jest config:init

這里是利用 ts-jest 自動生成 jest.config.js 文件。生成的代碼如下所示：就三行，很簡單吧。

// jest.config.js
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

運行

yarn jest

完工！附上了github repo，大家可以 clone 下來跑一下，也歡迎點贊。

Jest Runner

我們試著寫一個簡單的單元測試用例（該測試本身無意義）：

function add(a: number, b: number): number {
  return a + b;
}

describe("add function", () => {
  it("1 + 1 = 2", () => {
    expect(add(1, 1)).toEqual(2);
  });
});

單元測試在日常操作中一般就是 git hook 里跑一個yarn test:unit，檢查當(dāng)前更改有沒有破壞之前的代碼邏輯。但是，開發(fā)階段你更多只是跑一個 case。這時候你又要寫新的命令yarn jest fileName -t caseName，很麻煩，而且很容易又碰到配置問題。這里推薦一款 vscode 插件——Jest Runner，看一下安裝后的效果：

Run

每個 Case 前都會出現(xiàn) Run|Debug 標(biāo)識，點擊后自動運行。我們再看看 Debug 效果：

Debug

只要在 vscode 上打上斷點，點擊 Debug 按鈕，就會自動在斷點處停止，很方便吧。

小結(jié)

本文簡單介紹了 ts+jest 的入門配置，希望對初學(xué)者有所幫助。

最后再加幾句題外話：神書《人月神話》里提到過開發(fā)進(jìn)度的時間安排：

1/3 計劃、1/6 編碼、1/4 構(gòu)件測試以及 1/4 系統(tǒng)測試

測試時間占了一半，很意外吧？但是，我見過的絕大多數(shù)開發(fā)人員，90%以上的時間都在編碼；設(shè)計文檔是不可能有的，測試用例也很稀少。說來慚愧，我自己也是在工作四年后，才開始改變那種工作方式的，然后我有了更多的時間寫博客了，哈哈。不過，很可惜，我依舊無法改變周圍人的開發(fā)方式，即便是強制他們寫測試，也是應(yīng)付了事，唉。
還有，我從事過軟件外包工作，外包人員有個很具行業(yè)特色的現(xiàn)象——不寫測試。不知道大家看到后，有沒有覺得比我們外包強呢？