Jest 요약: 전역 객체의 속성과 메서드를 안전하게 모의-JS 튜토리얼-php.cn

Jest 요약: 전역 객체의 속성과 메서드를 안전하게 모의

WBOY

풀어 주다： 2024-07-19 15:10:32

원래의

364명이 탐색했습니다.

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).
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();
    });
});

로그인 후 복사