笑話簡(jiǎn)介

Jest 是一個(gè)用于測(cè)試 JavaScript 代碼的庫(kù)。

這是一個(gè)由 Facebook 維護(hù)的開源項(xiàng)目，它特別適合 React 代碼測(cè)試，但不僅限于此：它可以測(cè)試任何 JavaScript 代碼。它的優(yōu)點(diǎn)是：

• 速度很快
• 它可以執(zhí)行快照測(cè)試
• 它固執(zhí)己見，提供開箱即用的一切，無(wú)需您做出選擇

export default function sum(a, n) {
  return a + b;
}

divide.test.js

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

匹配器

匹配器是一種可以讓您測(cè)試值的方法。

• toBe 比較嚴(yán)格相等，使用 ===
• toEqual 比較兩個(gè)變量的值。如果它是一個(gè)對(duì)象或數(shù)組，它會(huì)檢查所有屬性或元素的相等性
• 傳遞 null 值時(shí) toBeNull 為 true
• 傳遞定義值時(shí) toBeDefined 為 true（與上面相反）
• 傳遞未定義值時(shí) toBeUndefine 為 true
• toBeCloseTo 用于比較浮點(diǎn)值，避免舍入錯(cuò)誤
• toBeTruthy true 如果該值被認(rèn)為是 true （就像 if 那樣）
• toBeFalsy 如果該值被認(rèn)為是假（就像 if 一樣），則為 true
• 如果 Expect() 的結(jié)果高于參數(shù)
，則 toBeGreaterThan true
• toBeGreaterThanOrEqual 如果 Expect() 的結(jié)果等于參數(shù)或高于參數(shù)
，則為 true
• 如果 Expect() 的結(jié)果低于參數(shù)
，則 toBeLessThan true
• toBeLessThanOrEqual 如果 Expect() 的結(jié)果等于參數(shù)或低于參數(shù)
，則為 true
• toMatch 用于將字符串與正則表達(dá)式模式匹配進(jìn)行比較
• toContain 用于數(shù)組，如果預(yù)期數(shù)組在其元素集中包含參數(shù)
，則為 true
• toHaveLength(number)：檢查數(shù)組的長(zhǎng)度
• toHaveProperty(key, value)：檢查對(duì)象是否具有屬性，并可選擇檢查其值
• toThrow 檢查您傳遞的函數(shù)是否拋出異常（一般情況下）或特定異常
• toBeInstanceOf()：檢查對(duì)象是否是類的實(shí)例

依賴關(guān)系

依賴項(xiàng)是您的應(yīng)用程序所依賴的一段代碼。它可以是我們項(xiàng)目中的函數(shù)/對(duì)象或第三方依賴項(xiàng)（例如 axios）

當(dāng)您自己的應(yīng)用程序沒有一段代碼就無(wú)法運(yùn)行時(shí)，它就成為真正的依賴項(xiàng)。

例如，如果您在應(yīng)用程序中實(shí)現(xiàn)一項(xiàng)功能來(lái)發(fā)送電子郵件或發(fā)出 api 請(qǐng)求或構(gòu)建配置對(duì)象等

有兩種方法我們可以在js項(xiàng)目的代碼中添加依賴項(xiàng)：

進(jìn)口

export default function sum(a, n) {
  return a + b;
}

依賴注入

只是一個(gè)簡(jiǎn)單概念的奇特術(shù)語(yǔ)。

如果您的函數(shù)需要外部依賴項(xiàng)的某些功能，只需將其作為參數(shù)注入即可。

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

單元測(cè)試

單元測(cè)試由軟件開發(fā)人員編寫和運(yùn)行，以確保應(yīng)用程序的一部分（稱為“單元”）滿足其設(shè)計(jì)并按預(yù)期運(yùn)行。

我們想要單獨(dú)測(cè)試我們的代碼，我們不關(guān)心任何依賴項(xiàng)的實(shí)際實(shí)現(xiàn)。
我們想要驗(yàn)證

• 我們的代碼單元按預(yù)期工作
• 返回預(yù)期結(jié)果
• 按其應(yīng)有的方式調(diào)用任何協(xié)作者（依賴項(xiàng)）

這就是模擬我們的依賴關(guān)系發(fā)揮作用的地方。

嘲笑

在單元測(cè)試中，模擬為我們提供了存根依賴項(xiàng)所提供的功能的能力，以及意味著觀察我們的代碼如何與依賴項(xiàng)交互。

當(dāng)將依賴項(xiàng)直接包含到我們的測(cè)試中成本昂貴或不切實(shí)際時(shí)，例如，當(dāng)您的代碼對(duì) API 進(jìn)行 HTTP 調(diào)用或與數(shù)據(jù)庫(kù)層交互時(shí)，模擬特別有用。

最好刪除這些依賴項(xiàng)的響應(yīng)，同時(shí)確保它們按要求被調(diào)用。這就是模擬派上用場(chǎng)的地方。

通過(guò)使用模擬函數(shù)，我們可以知道以下內(nèi)容：

• 收到的來(lái)電數(shù)量。
• 參數(shù) 每次調(diào)用時(shí)使用的值。
• 每次調(diào)用時(shí)的“上下文”或這個(gè)值。
• 函數(shù)如何退出以及產(chǎn)生了哪些值。

開玩笑地嘲笑

創(chuàng)建模擬函數(shù)有多種方法。

• jest.fn 方法允許我們直接創(chuàng)建一個(gè)新的模擬函數(shù)。
• 如果您正在模擬對(duì)象方法，則可以使用 jest.spyOn。
• 如果你想模擬整個(gè)模塊，你可以使用 jest.mock。

jest.fn 方法本身就是一個(gè)高階函數(shù)。

這是一個(gè)工廠方法，用于創(chuàng)建新的、未使用的模擬函數(shù)。

JavaScript 中的函數(shù)是一等公民，它們可以作為參數(shù)傳遞。

每個(gè)模擬函數(shù)都有一些特殊的屬性。模擬屬性是基礎(chǔ)。此屬性是一個(gè)對(duì)象，其中包含有關(guān)如何調(diào)用函數(shù)的所有模擬狀態(tài)信息。該對(duì)象包含三個(gè)數(shù)組屬性：

• 調(diào)用 [每次調(diào)用的參數(shù)]
• 實(shí)例 [每次調(diào)用時(shí)的“this”值]
• Results [函數(shù)退出的值]，results 屬性有類型（return 或 throw）和值
  • 函數(shù)顯式返回一個(gè)值。
  • 函數(shù)運(yùn)行完成，沒有 return 語(yǔ)句（相當(dāng)于返回 undefined
  • 函數(shù)拋出錯(cuò)誤。

export default function sum(a, n) {
  return a + b;
}

• https://codesandbox.io/s/implementing-mock-functions-tkc8b

模擬基礎(chǔ)

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

模擬注入的依賴項(xiàng)

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

模擬模塊

使用 jest.fn 模擬函數(shù)

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

這種類型的嘲笑不太常見，原因如下：

• jest.mock 自動(dòng)為模塊中的所有函數(shù)執(zhí)行此操作
• jest.spyOn 做同樣的事情，但允許恢復(fù)原始功能

使用 jest.mock 模擬模塊

更常見的方法是使用 jest.mock 自動(dòng)將模塊的所有導(dǎo)出設(shè)置為 Mock 函數(shù)。

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

使用 jest.spyOn 監(jiān)視或模擬函數(shù)

有時(shí)您只想觀看一個(gè)方法被調(diào)用，但保留原始實(shí)現(xiàn)。其他時(shí)候，您可能想要模擬實(shí)現(xiàn)，但稍后在套件中恢復(fù)原始版本。

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

恢復(fù)原來(lái)的實(shí)現(xiàn)

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

---

JavaScript 和事件循環(huán)

JavaScript 是單線程的： 一次只能運(yùn)行一個(gè)任務(wù)。通常這沒什么大不了的，但現(xiàn)在想象一下你正在運(yùn)行一個(gè)需要 30 秒的任務(wù).. 是的.. 在該任務(wù)期間，我們等待 30 秒，然后才會(huì)發(fā)生其他事情（JavaScript 默認(rèn)在瀏覽器的主線程上運(yùn)行，所以整個(gè)UI都卡住了）。
現(xiàn)在是 2020 年，沒有人想要一個(gè)緩慢、反應(yīng)遲鈍的網(wǎng)站。

幸運(yùn)的是，瀏覽器為我們提供了一些 JavaScript 引擎本身不提供的功能：Web API。這包括 DOM API、setTimeout、HTTP 請(qǐng)求 等。這可以幫助我們創(chuàng)建一些異步，非阻塞行為

export default function sum(a, n) {
  return a + b;
}

• 調(diào)用堆棧 - 當(dāng)我們調(diào)用一個(gè)函數(shù)時(shí)，它會(huì)被添加到稱為調(diào)用堆棧的東西中。
• WebAPI - setTimeout 由 WebAPI 提供，采用回調(diào)函數(shù)并設(shè)置計(jì)時(shí)器，而不阻塞主線程
• 隊(duì)列 - 當(dāng)計(jì)時(shí)器結(jié)束時(shí)，回調(diào)被添加到隊(duì)列
• 事件循環(huán) - 檢查調(diào)用堆棧是否為空，檢查隊(duì)列中是否有要執(zhí)行的回調(diào)，然后移至要執(zhí)行的調(diào)用堆棧

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

使用 Jest 測(cè)試異步代碼

Jest 通常希望同步執(zhí)行測(cè)試的函數(shù)。

如果我們執(zhí)行異步操作，但我們不讓 Jest 知道它應(yīng)該等待測(cè)試結(jié)束，則會(huì)給出誤報(bào)。

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

異步模式
JavaScript 中有多種處理異步操作的模式；最常用的是：

• 回調(diào)
• Promise 和異步/等待

測(cè)試回調(diào)

你不能在回調(diào)中進(jìn)行測(cè)試，因?yàn)?Jest 不會(huì)執(zhí)行它 - 測(cè)試文件的執(zhí)行在回調(diào)被調(diào)用之前結(jié)束。要解決此問題，請(qǐng)將參數(shù)傳遞給測(cè)試函數(shù)，您可以方便地調(diào)用“done”。 Jest 將等到您調(diào)用 done() 后再結(jié)束測(cè)試：

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

承諾

對(duì)于返回 Promise 的函數(shù)，我們從測(cè)試中返回一個(gè) Promise：

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

異步/等待

為了測(cè)試返回 Promise 的函數(shù)，我們還可以使用 async/await，這使得語(yǔ)法非常簡(jiǎn)單明了：

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

尖端

• 我們需要很好地理解我們的函數(shù)的作用以及我們要測(cè)試的內(nèi)容
• 思考我們正在測(cè)試的代碼的行為
• 設(shè)置舞臺(tái)：
  • 模擬/監(jiān)視任何依賴項(xiàng)
  • 我們的代碼是否與全局對(duì)象交互？我們也可以嘲笑/監(jiān)視他們
  • 我們的測(cè)試是否與 DOM 交互？我們可以構(gòu)建一些假元素來(lái)使用
  • 構(gòu)建你的測(cè)試
  • 鑒于...
  • 當(dāng)我打電話時(shí)......
  • 然后...我期待......

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

鏈接

• https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c
• https://jestjs.io/docs/en/mock-functions
• https://codesandbox.io/s/implementing-mock-functions-tkc8b
• https://github.com/BulbEnergy/jest-mock-examples
• https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
• https://jestjs.io/docs/en/asynchronous
• https://www.pluralsight.com/guides/test-asynchronous-code-jest

以上是Jest 簡(jiǎn)介：?jiǎn)卧獪y(cè)試、模擬和異步代碼的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！