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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Jest 测试框架使用的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。