🐛 에러(이슈) 및 해결 방법

일반적으로 발생한 에러와 해결 방법을 서술 또는 참고한 링크를 첨부하고자 함.

🐛 react-notion-x 의 notion-client API jest 테스트 에러

• react-notion-x 를 이용하여 notion-page 의 데이터를 렌더링하는데 이를 위해 notion-client 를 사용해야함.
• notion-client 를 jest 를 이용해 테스트 하려고 하니 오류가 발생
• 오류 내용은 react-notion-x 는 ESM 만 지원하기 때문에 jest 에서 ESM 을 지원하도록 해야한다고 함.
• 그래서 jest 에서 ESM 지원하도록 설정해서 해결

🐛 Window 10 OS, WSL 환경에서 Cypress 실행되지 않는 이슈 발생

• 필자는 window 10 os 환경 및 WSL 환경을 사용하고 있음. cypress 를 open 하고자 했는데 실행되지 않는 이슈 발생 (MAC 은 정상 작동 됨)
• 원인은 WSL 환경(ubuntu) 에서 GUI 를 실행시키기 위해 필요한 설정을 하지 않는 것으로 파악 (cypress open 하면 새로운 환경이 GUI 로 나오는데 cypress 와 WSL 통신 이슈) / (WSL GUI 테스트 문제?)
• 여러 포스트들을 참고하여 해결
  • cypress WSL 적용 방법 1
  • cypress WSL 적용 방법 2
  • 과정 참고용
  • cypress WSL 적용 방법 1, 2 를 참고해서 해결했던 거 같음.
• 필자가 기억하는 핵심 내용
  1. WSL 에서 GUI 를 위한 패키지 설치하고, 윈도우 환경에서 VcXsrv 를 설치 후 다운 받고, 마지막 실행 전에 -ac 옵션 수행
  2. zsh 를 사용하는데 display 값을 적용해야해서 zsh 설정했음

source ~/powerlevel10k/powerlevel10k.zsh-theme

# ...

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
export PATH=~/bin:$PATH

## 아마 이 부분이 핵심!!
# set DISPLAY variable to the IP automatically assigned to WSL2
export DISPLAY="$(~/bin/getdisplay.sh 'VPN Interface' 'Default Interface')"
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0

# tip 으로 zsh 업데이트 후 적용하려면 
exec zsh

🐛 cypress 와 jest type 충돌 이슈

• 현 프로젝트에는 jest 와 cypress 를 이용하여 테스트를 수행하는데 cypress 글로벌 type 으로 인해 jest 의 타입을 제대로 읽지 못하는 이슈가 있었다. (그로 인해 자동 완성도 안되었다 ㅠㅠ)
• 이슈에 관련하여 찾아본 결과 tsconfig 속성으로 cypress 관련된 것을 exclude 함으로서 해결할 수 있었다.
  (exclude: ["cypress", "cypress.config.ts"]) 실제 적용 부분 참고

🐛 nextjs pages 폴더 안에 test 코드 작성시 발생하는 이슈

• nextjs 의 pages 의 page 파일을 테스트하고자 했는데 빌드시 에러가 발생했다.
• 해당 에러를 알아본 결과 pages 폴더 안에 있는 파일은 빌드 타임에 포함되어 페이지 경로로 간주되기 때문에 발생한 이슈였다. 즉, 테스트 코드 파일을 페이지 파일로 인지하고 빌드하여 발생한 이슈! 이를 해결할 방법은 2가지가 있는데

1. 테스트 파일을 pages 디렉터리 외부로 이동
2. pageExtenstions 를 설정하여 페이지 파일 지정.
   필자는 2번의 경우를 적용했다.