인프런 커뮤니티 질문&답변

안녕하세요

현재 vue3로 구현된 프로젝트 내

로그인 성공 시 utils.js의 method3이 호출되는지 테스트를 하려고합니다

method3을 모킹함수로 대체하였는데

로그인 로직 내 method3을 콘솔로 찍어보면 undefined이 나와서 질문드립니다.

왜 method3이 undefined 가 나오는지 알려주실 수 있으실까요?

아래는 테스트 하기 위한 과정입니다.

1. 로그인 로직 중 utils.js의 method3을 호출하는 코드 존재

util.js

export const method1 = () => {
 ...
}

export const method2 = () => {
 ...
}

export const method3 = () => {
 ...
}

2. method3을 모킹 함수로 대체하려고 함

3. utils.js 파일이 위치하는 곳에 mocks 폴더를 만들어 아래와 같이 코드 작성

export default {

  ...jest.requireActual('../util'),

  method3: jest.fn()

}

4. 로그인 테스트 파일을 아래와 같이 작성

login.spec.js(테스트할 파일)

jest.mock('../common/util.js')

import { setActivePinia, createPinia } from 'pinia'

import * as fns from '../../common/util'

import { login } from '../../api/loginApi'

import { loginUser } from '../../store/authStore'

describe('로그인', ()=>{

 // userStore 내 loginUser 함수를 호출하기 위한 셋팅 
  let userStore 
  beforeEach(()=>{
    setActivePinia(createPinia())
    userStore = useAuthStore()
  })

  test('로그인 성공 시 성공 메시지 출력', async () => {
  // 로그인 성공 시 로그인한 사용자 정보 반환
  const mockResponse = {
     status : 200,
     data: {
        data: { 
           userName: 'test1'
        }
     } 
  }

 // 로그인 요청 api를 모킹함수로 대체
 await login.mockResovedValue(mockResponse) 

 // loginUser는 로그인 성공 시 유저 정보를 상태관리 변수에 저장
 await userStore.loginUser({userId : 'test1', password : 'test1pw'}) 

 expect(fns.method3).toHaveBeenCalled()

  })

})

 5. expect 부분에서 아래와 같이 오류 메시지가 발생합니다

expect(received).toHaveBeenCalledWith(...expected)

Matcher error: received value must be a mock or spy function

Received has value: undefined