[Jest Tutorial for Beginners: Getting Started With JavaScript Testing](https://www.valentinog.com/blog/jest/)

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

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

![](https://img-blog.csdnimg.cn/img_convert/db06f009b95f4826e50a7a902d60c724.png)

# 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：

```json
"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

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

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

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

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

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

![](https://img-blog.csdnimg.cn/img_convert/9274bb17dafbb06b8fd7a97a9e68d20d.png)

而 jest.EmptyFunction, 定義很簡單：

```typescript
type EmptyFunction = () => void;
```

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

```typescript
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 屬性與給定搜尋詞不匹配的物件。

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

```typescript
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 匹配器來檢查我們虛構的（目前）函式在呼叫時是否返回預期結果。

這是測試：

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

完整的程式碼：

```typescript
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
測試透過：
![](https://img-blog.csdnimg.cn/img_convert/3121f9aec1d1cff7886e4b60705df51c.png)

測試程式碼的 coverage：

> npm test -- --coverage

![](https://img-blog.csdnimg.cn/img_convert/da4a2726e7a4851de732af3c618604ff.png)

Jest 測試框架使用的學習筆記

相關文章