」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 笑話回顧:安全模擬全域物件的屬性和方法

笑話回顧:安全模擬全域物件的屬性和方法

發佈於2024-08-05
瀏覽:892

Jest Recap: Safely Mock Properties and Methods of Global Objects

長話短說:

  • 您希望避免覆蓋/模擬的屬性/方法影響其他測試。
  • 對於本地物件(由該測試創建並擁有),您可以(並且應該)使用
    • localObject.theAnswer = 42 和
    • localObject.calcTheAnswer = jest.fn(() => 42).
  • 對於全域對象,您應該使用
    • jest.replaceProperty(globalObject, "theAnswer", 42) 和
    • jest.spyOn(globalObject, "calcTheAnswer").mockReturnValue(42).
  • 確保在 afterEach() 掛鉤中呼叫 jest.restoreAllMocks()。

什麼?

在一個完美的世界 代碼庫中,不需要操作全局對象,但是世界 代碼庫很混亂- 所以正在測試。

您要不惜一切代價避免一個測試影響另一個測試。無論測試的順序如何,或是否跳過某些測試,測試都應該有意義。

模擬屬性

模擬值的簡單方法是將屬性設定為測試中所需的任何值。
只要您更改此特定測試擁有(已建立)的本機物件中的值就可以了:

describe("override properties of local objects", () => {
    it("works and is harmless", () => {
        const myArray = [1];
        myArray.length = 0;
        expect(myArray).toHaveLength(0);
    });
    it("does not affect the next test", () => {
        const myArray = [1];
        expect(myArray).toHaveLength(1);
    });
});

如果你對全域物件這樣做,它會變得混亂:

describe("don't override properties of global objects", () => {
    it("works before the property is overridden", () => {
        expect(window.innerWidth).toBeGreaterThan(0);
    });
    it("works, but is evil", () => {
        window.innerWidth = 0;
        expect(window.innerWidth).toBe(0);
    });
    it("fails in the test after the property was overridden", () => {
        expect(() => {
            expect(window.innerWidth).toBeGreaterThan(0); // 



這就是 jest.replaceProperty() 的用途:

describe("use jest.replaceProperty() to override properties of global objects", () => {
    afterEach(() => {
        jest.restoreAllMocks();
    });
    it("works before the property is overridden", () => {
        expect(window.innerWidth).toBeGreaterThan(0);
    });
    it("works and is harmless", () => {
        jest.replaceProperty(window, "innerWidth", 0);
        expect(window.innerWidth).toBe(0);
    });
    it("does not affect the next test", () => {
        expect(window.innerWidth).toBeGreaterThan(0);
    });
});

模擬方法

方法可以像屬性一樣被模擬。

describe("override methods of local objects using jest.fn()", () => {
    it("works and is harmless", () => {
        const mySet = new Set([1]);
        mySet.has = jest.fn().mockReturnValue(false);
        expect(mySet.has(1)).toBeFalsy();
    });
    it("does not affect the next test", () => {
        const mySet = new Set([1]);
        expect(mySet.has(1)).toBeTruthy();
    });
});

如果您在全域物件上使用 myObject.someFunction = jest.fn() ,您的測試可能會相互依賴並失去其意義:

describe("don't override methods of global objects using jest.fn()", () => {
    it("works before the method is overridden", () => {
        expect(document.getElementById("foo")).toBeNull();
    });
    it("works, but is evil", () => {
        const el = document.createElement("div");
        document.getElementById = jest.fn().mockReturnValue(el);

        expect(document.getElementById("foo")).toBe(el);
    });
    it("fails in the test after the property was overridden", () => {
        expect(() => {
            expect(document.getElementById("foo")).toBeNull(); // 



我們該如何模擬全域物件中的方法?這就是 jest.spyOn() 的優點:

describe("use jest.spyOn() to override methods of global objects", () => {
    afterEach(() => {
        jest.restoreAllMocks();
    });
    it("works before the method is overridden", () => {
        expect(document.getElementById("foo")).toBeNull();
    });
    it("works and is harmless", () => {
        const el = document.createElement("div");
        jest.spyOn(document, "getElementById").mockReturnValue(el);

        expect(document.getElementById("foo")).toBe(el);
    });
    it("does not affect the next test", () => {
        expect(document.getElementById("foo")).toBeNull();
    });
});

你必須清理

如果您想確保所有測試都發現系統處於相同(新鮮、乾淨)狀態,則需要在每次測試後恢復模擬的狀態。

最簡單的解決方案是設定restoreMocks配置屬性。

最直接的選擇是在 afterEach()

中呼叫 jest.restoreAllMocks()

如何為所有測試模擬某些內容

有時您會想模擬文件中所有測試的內容。如果您在頂層或在describe()區塊中使用jest.spyOn()和jest.replaceProperty(),則在執行第一個測試後所有Mock將被重設。

在頂層,您可以安全地重寫屬性和方法,無需 jest.spyOn() 和 jest.replaceProperty()。

如果您只想為describe() 區塊模擬事物,則需要在beforeEach() 掛鉤中進行這些呼叫。

版本聲明 本文轉載於:https://dev.to/htho/jest-recap-safely-mock-properties-and-methods-of-global-objects-3ph8?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • CSS 媒體查詢
    CSS 媒體查詢
    確保網站在各種裝置上無縫運作比以往任何時候都更加重要。隨著用戶透過桌上型電腦、筆記型電腦、平板電腦和智慧型手機造訪網站,響應式設計已成為必要。響應式設計的核心在於媒體查詢,這是一項強大的 CSS 功能,可讓開發人員根據使用者裝置的特徵應用不同的樣式。在本文中,我們將探討什麼是媒體查詢、它們如何運作以...
    程式設計 發佈於2024-11-05
  • 了解 JavaScript 中的提升:綜合指南
    了解 JavaScript 中的提升:綜合指南
    JavaScript 中的提升 提升是一種行為,其中變數和函數聲明在先前被移動(或「提升」)到其包含範圍(全域範圍或函數範圍)的頂部程式碼被執行。這意味著您可以在程式碼中實際聲明變數和函數之前使用它們。 變數提升 變數 用 var 宣告的變數被提升...
    程式設計 發佈於2024-11-05
  • 將 Stripe 整合到單一產品 Django Python 商店中
    將 Stripe 整合到單一產品 Django Python 商店中
    In the first part of this series, we created a Django online shop with htmx. In this second part, we'll handle orders using Stripe. What We'll...
    程式設計 發佈於2024-11-05
  • 在 Laravel 測試排隊作業的技巧
    在 Laravel 測試排隊作業的技巧
    使用 Laravel 應用程式時,經常會遇到命令需要執行昂貴任務的情況。為了避免阻塞主進程,您可能決定將任務卸載到可以由佇列處理的作業。 讓我們來看一個例子。想像一下指令 app:import-users 需要讀取一個大的 CSV 檔案並為每個條目建立一個使用者。該命令可能如下所示: /* Imp...
    程式設計 發佈於2024-11-05
  • 如何創建人類層級的自然語言理解 (NLU) 系統
    如何創建人類層級的自然語言理解 (NLU) 系統
    Scope: Creating an NLU system that fully understands and processes human languages in a wide range of contexts, from conversations to literature. ...
    程式設計 發佈於2024-11-05
  • 如何使用 JSTL 迭代 HashMap 中的 ArrayList?
    如何使用 JSTL 迭代 HashMap 中的 ArrayList?
    使用JSTL 迭代HashMap 中的ArrayList在Web 開發中,JSTL(JavaServer Pages 標準標記庫)提供了一組標記來簡化JSP 中的常見任務( Java 伺服器頁面)。其中一項任務是迭代資料結構。 要迭代 HashMap 及其中包含的 ArrayList,可以使用 JS...
    程式設計 發佈於2024-11-05
  • Encore.ts — 比 ElysiaJS 和 Hono 更快
    Encore.ts — 比 ElysiaJS 和 Hono 更快
    几个月前,我们发布了 Encore.ts — TypeScript 的开源后端框架。 由于已经有很多框架,我们想分享我们做出的一些不常见的设计决策以及它们如何带来卓越的性能数据。 性能基准 我们之前发布的基准测试显示 Encore.ts 比 Express 快 9 倍,比 Fasti...
    程式設計 發佈於2024-11-05
  • 為什麼使用 + 對字串文字進行字串連接失敗?
    為什麼使用 + 對字串文字進行字串連接失敗?
    連接字串文字與字串在 C 中,運算子可用於連接字串和字串文字。但是,此功能存在限制,可能會導致混亂。 在問題中,作者嘗試連接字串文字「Hello」、「,world」和「!」以兩種不同的方式。第一個例子:const string hello = "Hello"; const str...
    程式設計 發佈於2024-11-05
  • React 重新渲染:最佳效能的最佳實踐
    React 重新渲染:最佳效能的最佳實踐
    React高效率的渲染機制是其受歡迎的關鍵原因之一。然而,隨著應用程式複雜性的增加,管理元件重新渲染對於最佳化效能變得至關重要。讓我們探索優化 React 渲染行為並避免不必要的重新渲染的最佳實踐。 1. 使用 React.memo() 作為函數式元件 React.memo() 是...
    程式設計 發佈於2024-11-05
  • 如何實作條件列建立:探索 Pandas DataFrame 中的 If-Elif-Else?
    如何實作條件列建立:探索 Pandas DataFrame 中的 If-Elif-Else?
    Creating a Conditional Column: If-Elif-Else in Pandas給定的問題要求將新列新增至DataFrame 中基於一系列條件標準。挑戰在於在實現這些條件的同時保持程式碼效率和可讀性。 使用函數應用程式的解決方案一種方法涉及創建一個將每一行映射到所需結果的函...
    程式設計 發佈於2024-11-05
  • 介紹邱!
    介紹邱!
    我很高興地宣布發布 Qiu – 一個嚴肅的 SQL 查詢運行器,旨在讓原始 SQL 再次變得有趣。老實說,ORM 有其用武之地,但當您只想編寫簡單的 SQL 時,它們可能會有點不知所措。我一直很喜歡寫原始 SQL 查詢,但我意識到我需要練習——大量的練習。這就是Qiu發揮作用的地方。 有了 Qiu...
    程式設計 發佈於2024-11-05
  • 為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?
    為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?
    CSS 中的 margin-top 百分比計算CSS 中的 margin-top 百分比計算當對元素應用 margin-top 百分比時,必須了解計算方式執行。與普遍的看法相反,邊距頂部百分比是根據包含塊的寬度而不是其高度來確定的。 W3C 規範解釋:W3C 規範解釋:根據W3C 規範,“百分比是根...
    程式設計 發佈於2024-11-05
  • 如何解決 CSS 轉換期間 Webkit 文字渲染不一致的問題?
    如何解決 CSS 轉換期間 Webkit 文字渲染不一致的問題?
    解決CSS 轉換期間的Webkit 文本渲染不一致在CSS 轉換期間,特別是縮放元素時,Webkit 中可能會出現文本渲染不一致的情況瀏覽器。這個問題源自於瀏覽器嘗試優化渲染效能。 一種解決方案是透過添加以下屬性來強制對過渡元素的父元素進行硬體加速:-webkit-transform: transl...
    程式設計 發佈於2024-11-05
  • 使用 Reactables 簡化 RxJS
    使用 Reactables 簡化 RxJS
    介紹 RxJS 是一個功能強大的庫,但眾所周知,它的學習曲線很陡峭。 這個函式庫龐大的 API 介面,再加上向反應式程式設計的典範轉移,可能會讓新手不知所措。 我創建了 Reactables API 來簡化 RxJS 的使用並簡化開發人員對反應式程式設計的介紹。 ...
    程式設計 發佈於2024-11-05
  • 如何在 Pandas 中找到多列的最大值?
    如何在 Pandas 中找到多列的最大值?
    找出 Pandas 中多列的最大值要確定 pandas DataFrame 中多列的最大值,可以採用多種方法。以下是實現此目的的方法:對指定列使用max() 函數此方法涉及明確選擇所需的列並應用max() 函數: df[["A", "B"]] df[[&quo...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3