[Next.js] Jest + Cypress 환경에서 Cypress 제공함수의 타이핑 & 자동완성이 안되는 경우

Next.js 환경에서 Jest + Cypress를 구축하는 도중에 문제가 발생했습니다.

 

Jest로 만든 테스트 코드 (*.test.ts | tsx) 는 문제없이 타이핑 및 자동완성이 잘 되는데,

Cypress로 테스트 코드 (*.spec.ts) 를 작성할 때 타이핑 및 자동완성이 되지가 않습니다.

 

 

VS Code가 cy 를 찾지 못하고 있습니다.

 

 

Cypress를 이용한 E2E 테스트 코드는 보통 cypress 디렉토리 내에 작성하게 되는데,

cypress 디렉토리 내부의 테스트 코드들이 루트 디렉토리의 tsconfig.json의 설정에 영향을 받고 있기 때문입니다.

 

 

 

// /tsconfig.json

{
  "compilerOptions": {
	... // 다른 설정
  },
  "exclude: [
  ... // 다른 설정
  "cypress"
  ]
}

루트 디렉토리의 tsconfig.json에서 exclude에 cypress를 넣어줘서,

Jest 환경에서 Cypress와 충돌되지 않도록 해줍니다.

 

 

 

// /cypress/tsconfig.json

{
  "compilerOptions": {
  	... // 다른 설정
  	"types": ["cypress"]
  },
  "exclude": ["jest"]
}

cypress 디렉토리에 tsconfig.json을 만들고,

이 디렉토리 내부의 타입스크립트 파일들이 여기서 적용한 설정들에 영향을 받도록 해줍니다.

 

types 속성을 이용해서 cypress 타이핑만 적용하도록 했습니다.

exclude에 jest를 넣어서 Jest가 제공하는 타이핑이 나오지 않도록 처리했습니다.

 

 

 

Cypress가 제공하는 cy에 대한 인텔리전스가 잘 나옵니다...!