Jest spyOn은 어떻게 작동할까

이전 글에서 Jest의 Matcher에 대해 간략하게 소개했다. Mock에 대해서도 잠깐 얘기했는데, spyOn이 어떻게 작동하는지 궁금해졌다.
아래의 코드를 봐보자.

const consoleLog = console.log;
test("spyOn으로 console.log를 mocking하면, console.log는 다른 함수가 된다.", () => {
    expect(console.log).toEqual(consoleLog)
    
    const consoleLogMocking = jest.spyOn(console, "log");
    // expect(console.log).toEqual(consoleLog)  // false
    // spyOn을 console.log에 붙이니 console.log와 consoleLog는 달라졌다.
    
    console.log("hi")
    consoleLog("hi")
    consoleLog("hi")

    expect(consoleLogMocking).toBeCalledTimes(1)

    /*
    이해 안되는 부분
    console.log는 consoleLogMocking과 동일시 되면서
    console.log를 받은 consoleLog는 왜 mocking 전의 console.log와 일치하냐는 거지
    기존 함수에 mock를 걸면 어떻게, 무엇이 바뀌는 걸까?
    */
});

spyOn을 통해 console.log를 감시한다. 이 코드에서의 궁금증은 코드 주석에서 얘기하고 있다. consoleLog와 console.log는 같은 기능을 수행하는데, consoleLog는 Mock Function이 아니다. 이 글에선 이것을 이해할 수 있도록 적어보겠다.

여기 평화로운 console.log 하나가 있다. consoleLog라는 새로운 변수가 console.log를 참조할 것이다. 이제 test 내부에서 spyOn을 통해 console.log를 mocking 한다. 이 과정에서 console.log는 mock function을 참조하게 된다. 이를 사진으로 과정을 보면 이렇다.

이제 이해가 가는가? 처음에 보고 이해가 가지 않았던 나를 위해 Jest 공식 spyOn 코드를 첨부한다.

참고

[번역]Jest Mocks에 대한 이해
Jest github spyOn 코드