jest의 mocking :: jest.Fn()과 jest.spyOn()

 프론트 작업을 하다가 보면 mock data를 쓴다는 이야기를 테스트 코드를 접하지 않았더라도 들어봤을 것이다. 이  mocking 함수라는 것도 이 mock data와 동일한 개념으로 이해하면 편하다. 흔하게 mock data를 사용하는 경우는 어떤 경우에서의 반환되는 데이터를 간단하게 대체해서 UI를 구성하는 데에서 사용한다. 즉, 가짜 데이터를 이야기한다.

 그런 측면에서 테스트 코드의 mocking도 동일하다. 즉 가짜 함수를 만들어서 반환되었을 때의 테스트를 진행한다고 생각하면 된다. mocking 함수, 즉 가짜 함수를 만들어서 그 값을 예상되는 반환값을 주도록 작성하고 그 값을 토대로 UI나 단위 테스트를 진행하는 것이다. 그럼 이 mocking 함수에 대해서 어떻게 호출하고 반환값은 어떻게 설정하는지, 그리고 어떤 식으로 실제 활용이 되는지에 대해서 알아보자.

About jest.Fn()

1. mocking 함수 선언

 간단하게 아래와 같이 mocking 함수를 선언해서 사용할 수 있고 파라미터값을 전달할 수 있다.
 단, 반환값에 대한 설정이 되어 있지 않기 때문에 return되는 값이 없고, 그로 인해서 undefinde가 나온다.

const mockingFn = jest.Fn()

console.log(mockingFn(1)) // undefined

2. 반환값 설정하기

 mockImplementation 메소드를 사용해서 함수의 로직을 설정해줌으로서 반환값을 지정해줄 수 있다.
 유닛 테스트를 하면서 불필요하게 요청에 따른 서버 로직에 대한 것들까지 재설정할 필요는 없지만, 간단하게 반환값을 설정하고 그 반환값을 통해서 그려지는 UI테스트를 하기에 유용하다.

const mockingFn = jest.Fn()

mockingFn.mockImplementation(( text : string ) => text)
console.log(mockingFn('hi')) // hi

3. 함수 실행여부 확인하기

 함수 실행여부라는 것은 함수가 호출되었는지를 검사함으로써 알 수 있다.
 toBeCalledTimes라는 메소드를 사용해서 해당 함수가 몇회 호출되었는지에 대해서 확인할 수 있다.

const mockingFn = jest.Fn()

expect(mockingFn).toBeCalledTimes(1);

About jest.spyOn()

 jest의 spyOn은 어떤 점이 Fn() 메소드와 다를까? spyOn은 mocking함수보다 조금 작은 바운더리를  가진 친구라고 이해하면 된다. 어떤 객체에서 어떻게 사용되었는지를 확인하기에 좋은 메소드라고 정리하면 될 것 같다.

1. spyOn() 사용해보기

// 컴포넌트 내부 함수 호출 코드
// const parentsObject = {
//   mocking: (text) => text,
// };
// parentsObject.mocking('hi')


// 해당 컴포넌트에 대한 테스트 코드
const spyFn = jest.spyOn(parentsObject, "mocking").mockImplementation((text) => text);

expect(spyFn).toCalledTimes(1);
expect(spyFn).toBeCalledWith('hi');
expect(spyFn('hi')).toBe('hi');

내가 이 챕터를 공부한 이유 :: window.alert() 메소드 테스트하기

global.alert = jest.fn();
expect(global.alert).toBeCalledTimes(1);

const mockAlert = jest.spyOn(window, "alert").mockImplementation(() => {});
expect(mockAlert).toBeCalledTimes(1);

 

jest.Fn()과 spyOn()을 공부하고도 활용에 대해서 제대로 사용하지 않았기에 모킹해서 window 메소드를 테스트 하는 것에 대해서 생각해보지 않았는데 같이 TDD 스터디를 진행한 지현님을 통해 리마인드 되어서 다시한번 공부해봤다.