Jest Tutorial for Beginners: Getting Started With JavaScript Testing

Jest 是一個 JavaScript 測試執行器，即用於建立、執行和構建測試的 JavaScript 庫。

Jest 作為 NPM 包釋出，您可以將其安裝在任何 JavaScript 專案中。 Jest 是當今最流行的測試執行器之一，也是 React 專案的預設選擇。

Setting up the project

與每個 JavaScript 專案一樣，您需要一個 NPM 環境（確保在您的系統上安裝了 Node）。 建立一個新資料夾並使用以下命令初始化專案：

mkdir getting-started-with-jest && cd $_
npm init -y

接著：

npm i jest --save-dev

讓我們也配置一個 NPM 指令碼來從命令列執行我們的測試。 開啟 package.json 並配置一個名為 test 的指令碼來執行 Jest：

"scripts": {
    "test": "jest"
  },

Specifications and test-driven development

作為開發人員，我們都喜歡創意自由。 但是，在大多數情況下，當涉及到嚴肅的事情時，您沒有那麼多特權。

我們必須遵循規範，即對要構建的內容的書面或口頭描述。

在本教程中，我們從專案經理那裡得到了一個相當簡單的規範。 一個超級重要的客戶端需要一個 JavaScript 函式來過濾一個物件陣列。

對於每個物件，我們必須檢查一個名為“url”的屬性，如果該屬性的值與給定的術語匹配，那麼我們應該在結果陣列中包含匹配的物件。

作為一名精通測試的 JavaScript 開發人員，您希望遵循測試驅動開發，這是一種在開始編碼之前強制編寫失敗測試的學科。

預設情況下，Jest 希望在您的專案資料夾中名為 tests 的資料夾中找到測試檔案。 建立新資料夾：

mkdir tests

接下來在 tests 中建立一個名為 filterByTerm.spec.js 的新檔案。 您可能想知道為什麼副檔名包含 .spec。這是從 Ruby 借用的約定，用於將檔案標記為給定功能的規範。

Test structure, and a first failing test

describe("Filter function", () => {
  // test stuff
});

我們的第一個朋友是 describe，一個包含一個或多個相關測試的 Jest 方法。 每次你開始為一個功能編寫一套新的測試時，都將它包裝在一個 describe 塊中。 如您所見，它需要兩個引數：一個用於描述測試套件的字串，以及一個用於包裝實際測試的回撥函式。

接下來我們將遇到另一個名為 test 的函式，它是實際的測試塊：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    // actual test
  });
});

這裡 describe 的型別是 jest.Describe, 該函式接受兩個輸入引數，其型別分別為字串和 jest.EmptyFunction

而 jest.EmptyFunction, 定義很簡單：

type EmptyFunction = () => void;

此時我們已準備好編寫測試。 請記住，測試是輸入、功能和預期輸出的問題。 首先讓我們定義一個簡單的輸入，一個物件陣列：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];
  });
});

接下來，我們將定義預期結果。 根據規範，被測函式應排除 url 屬性與給定搜尋詞不匹配的物件。

例如，我們可以期待一個包含單個物件的陣列，給定“連結”作為搜尋詞：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];
  });
});

現在我們已準備好編寫實際測試。 我們將使用 expect 和一個 Jest 匹配器來檢查我們虛構的（目前）函式在呼叫時是否返回預期結果。

這是測試：

expect(filterByTerm(input, "link")).toEqual(output);

完整的程式碼：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];

    expect(filterByTerm(input, "link")).toEqual(output);

  });
});

執行命令列：npm test
測試通過：

測試程式碼的 coverage：

npm test -- --coverage

更多Jerry的原創文章，盡在："汪子熙":