[Jest] The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. 오류 해결하기

평화롭게 테스트 코드를 짜고 있던 중 다음과 같은 에러를 만났다.

 

에러 이미지

 

 

토스트 UI를 호출하는 useToast hook을 검사하려 하는데 오류가 난 것이었다.

 

테스트 코드 자체는 이상이 없었는데 에러가 발생해서 바로 구글링을 시작하려 하는데..

The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.

스코프 바깥에 선언이 되었다고 ..?

 

게다가 오류 형태도 참조에러기 때문에 무언가 있다고 생각해서 jest 공식 홈페이지를 뒤지기 시작했고 곧 정답을 찾을 수 있었다!

 

Since calls to jest.mock() are hoisted to the top of the file, Jest prevents access to out-of-scope variables. By default, you cannot first define a variable and then use it in the factory. Jest will disable this check for variables that start with the word mock. However, it is still up to you to guarantee that they will be initialized on time. Be aware of 
Temporal Dead Zone.

 

공식문서에 보면  jest.mock() 함수는 호이스팅이 되어 스크립트 파일의 가장 위로 올려지기 때문에 변수를 먼저 정의한 다음 팩토리 내부에서 사용할 수 없다는 것이다..!

그러나 mock이라는 단어로 시작하게 되면 해당 검사를 비활성화 시킬 수 있다고 나와 있다.

 

 

...

const testToast = jest.fn();
jest.mock('@components/ui', () => ({
  ...jest.requireActual('@components/ui'),
  useToast: () => ({ toast: testToast, dismiss: jest.fn() }),
}));

...

it('제출하기 버튼을 누르면 토스트를 노출시킨다.', async () => {
  const openAnswerButton = screen.getByTestId('submit-button');

  await userEvent.click(openAnswerButton);
  await waitFor(() => {
    expect(testToast).toHaveBeenCalledTimes(1);
  });
});

기존 코드는 위와 같았는데

 

...

const mockTestToast = jest.fn();
jest.mock('@components/ui', () => ({
  ...jest.requireActual('@components/ui'),
  useToast: () => ({ toast: mockTestToast, dismiss: jest.fn() }),
}));

...

it('제출하기 버튼을 누르면 토스트를 노출시킨다.', async () => {
  const openAnswerButton = screen.getByTestId('submit-button');

  await userEvent.click(openAnswerButton);
  await waitFor(() => {
    expect(mockTestToast).toHaveBeenCalledTimes(1);
  });
});

다음과 같이 변수 명을 바꾸게 되면

 

위와 같이 테스트가 성공한다는 걸 확인할 수 있었다!

 

문제의 원인을 분석하고 해결만 하는 것이 아니라 Why를 깨달으려는 개발자가 되자.