開玩笑 - 將模擬實例作為 class 構造函數參數傳遞

Question

我目前正在嘗試用 jest（新手）編寫一些測試。 關於我的最新帖子，我遇到了以下情況：

我有多個價格字段。 每個價格字段都有自己的渲染器。 渲染器具有對其價格字段的引用。 價格字段可以從 dom 中確定一些 html 片段。

// priceField.js

class PriceField {
  constructor() {
    const renderer = new PriceFieldRenderer(this);
    // do something with renderer
  }

  /**
   * Determines Node in DOM for this price field
   */
  determinePriceFieldNode() {
    return document.querySelector(".price-field");
  }
}

export default PriceField;

// priceFieldRenderer.js

class PriceFieldRenderer {
  constructor(priceField) {
    this.priceFieldNode = priceField.determinePriceFieldNode();
  }
}

export default PriceFieldRenderer;

現在我想測試PriceFieldRenderer （開玩笑）。 因此，我需要模擬PriceField和它的determinePriceFieldNode() function。

但是，我無法將模擬的價格字段實例作為構造函數參數傳遞。 我已經閱讀了帶有聲音播放器示例的官方文檔，並在谷歌上搜索了大約 2 小時。 我也測試了不同的實現，但我無法解決它。 這是一個引發以下錯誤的代碼片段： TypeError: priceField.determinePriceFieldNode is not a function

jest.mock("./priceField");

import PriceFieldRenderer from "./priceFieldRenderer";
import PriceField from "./priceField";

describe("Price field renderer", () => {
  test("with calculated price", () => {
    const priceField = PriceField.mockImplementation(() => {
      return {
        determinePriceFieldNode: () => "<html/>"
      };
    });

    const sut = new PriceFieldRenderer(priceField);

    expect(sut).toBeDefined();
  });
});

我確定我做的方式不是最好的，那里有一些幫助:)

Answer 1

這里的問題是priceField是小寫的，並假設它是一個實例，而它的間諜 function 應該創建一個實例。 它可以通過以下方式修復：

PriceField.mockImplementation(...);
const priceField = new PriceField();
const sut = new PriceFieldRenderer(priceField);

priceField模塊模擬和相關PriceField間諜沒有很好的用途。 如果它被導入並在另一個模塊中使用，它們將是必需的，這是來自 Jest 文檔顯示的上述示例。

PriceFieldRenderer使用依賴注入使測試更簡單，這是該模式的好處之一：

const priceField = { determinePriceFieldNode: jest.fn(() => "<html/>") });
const sut = new PriceFieldRenderer(priceField);