Jest の要約: グローバルオブジェクトのプロパティとメソッドを安全にモックする-jsチュートリアル-php.cn

Jest の要約: グローバルオブジェクトのプロパティとメソッドを安全にモックする

WBOY

リリース： 2024-07-19 15:10:32

オリジナル

366 人が閲覧しました

Jest Recap: Safely Mock Properties and Methods of Global Objects

TL;DR:

オーバーライド/モックされたプロパティ/メソッドが他のテストに影響を与えることを避けたいと考えています。
ローカルオブジェクト (このテストによって作成および所有される) の場合は、使用できます (使用する必要があります)。
- localObject.theAnswer = 42 および
- localObject.calcTheAnswer = jest.fn(() => 42).
グローバルオブジェクトには使用する必要があります
- jest.replaceProperty(globalObject, "theAnswer", 42) および
- jest.spyOn(globalObject, "calcTheAnswer").mockReturnValue(42).
jest.restoreAllMocks() が afterEach() フックで呼び出されていることを確認してください。

何？

完璧な世界 コードベースではグローバルオブジェクトを操作する必要はありませんが、世界 コードベースは乱雑です - そしてテスト中です。

何としても避けたいのは、一方のテストが他方のテストに影響を与えることです。テストは、順序や一部のテストがスキップされたかどうかに関係なく、意味のあるものである必要があります。

プロパティのモック化

モック値への素朴なアプローチは、プロパティをテストで必要な値に設定することです。
この特定のテストが所有する (作成した) ローカルオブジェクトの値を変更する限り、これは問題ありません:

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); // <-- ERROR: expect(received).toBeGreaterThan(expected)
        }).toThrow(Error);
    });
});

ログイン後にコピー

これは 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(); // <-- ERROR: expect(received).toBeNull()
        }).toThrow(Error);
    });
});

ログイン後にコピー

グローバルオブジェクトのメソッドをどのようにモックすればよいでしょうか?これが 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();
    });
});

ログイン後にコピー