[vitest] Failed to resolve import "path" from 'component'. Does the file exist? 에러 해결하기

Next.js 14버전과 vitest를 사용하여 테스트 환경을 구성하던 중 다음과 같은 오류를 만났다.

 

Failed to resolve import "@/utils/test/render" from "src/app/components/GNB.spec.tsx". Does the file exist?

 

환경 구성도 잘 되어져 있고, 문제가 없었는데 파일 참조를 못하는 오류가 발견된 것이다..

 

프로젝트에서 절대 경로를 사용하도록 다음과 같이 설정했었는데 해당 부분에서 문제가 생긴듯 하다.

 

//tsconfig.json

compilerOptions: {
  ...
  "paths": {
      "@/*": ["./src/app/*"]
  }
}

 

vitest 내부에서도 절대경로를 수정해줘야 할 것 같아서 구글 검색과 공식문서를 통해서 다음과 같이 수정했다.

 

//vitest.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: [{ find: "@/*", replacement: path.resolve(__dirname, "./src/app/*") }],
  },
});

이렇게 구성하면 config에서 파일 경로를 내가 설정한 경로로 변경할 수 있다고한다.!

 

하지만 결과는....!

에러 사진

여전히 에러가 발생한다...🤔

 

구글 검색을 다시 해보니 alias에서의 구문 분석이 틀렸다고한다..!

 

export default defineConfig({
  ...
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "./src/app") }],
  },
});

 

하위 전체를 이르는 "*"부분에 대한 구문분석을 일반 문자열로 인식해 에러가 발생한다고 한다.(의심입니다!)

 

다시 수정 후 테스트 하는 결과는..!!

 

성공이다!!

 

이번 기회를 통해 vitest의 alias에 대해 알아볼 수 있는 시간이었다..ㅎ