[트러블슈팅] 스토리북 오류 발생 해결..🌞

이번에 북잡 프로젝트에서 스토리북을 사용하는데… 오류가 발생했다..

오류 내용을 요약하자면 Storybook이 해당 파일을 제대로 로딩하지 못했다

이슈 가능성으로는

---

1. 경로 문제

2. Vite/Webpack과의 호환 문제

3. Story 파일 자체의 오류

4. 환경 변수 또는 import 경로가 잘못된 경우

5. 브라우저 캐시 / 빌드 오류

---

결론적으로 말하면 여섯가지 모두 원인이 아니었다.🙅🏻‍♀️

UI Tests를 클릭해서 어떤 컴포넌트들이 문제인지 확인했다.

세가지 모두 내가 수정하기 전에 팀원이 배포 했을 때는 문제가 없었다. 그래서 분명 내가 수정하면서 발생한 문제라고 생각했다.

다른 컴포넌트들에는 문제가 없었는데….. 그러면 storybook 패키지 문제는 아니고 저 세개의 컴포넌트에서만 발생했으니,,,! 공통점이 뭘까라는 생각을 하게 되었다.

세개의 컴포넌트 파일을 확인한 결과 내가 useNavigate()를 공통으로 삽입한 부분을 확인했다✅

(details 클릭하니깐 친절하게 알려주는 것도 나중에 확인했다🤨)

컴포넌트에 useNavigate() 를 삽입해주면 스토리북에서도 해줘야하는 게 있는데

바로

💡 MemoryRouter()이다.

👉🏻 🔗 스토리북 router 공식문서

Storybook에서 React Router를 사용하는 컴포넌트를 테스트할 때 필요하다.

//설치 명령어 
yarn add -D storybook-addon-react-router-v6

//사용방법
import { MemoryRouter } from 'react-router-dom' 

const Template = (args) => (
  <MemoryRouter>
    <FreeBoard {...args} />
  </MemoryRouter>
)

이런식으로 감싸줘야한다.

Header, Footer, Freeboard에 다 적용해준 결과 정상적으로 나오는 거 확인 완료 ! ✨

완성,,,🔥

🚀 배운점

• MemoryRouter의 사용 🙌🏻
  Storybook에서 React Router 관련 컴포넌트를 테스트할 때 MemoryRouter를 사용한다는 것을 배웠다..!

  나는 스토리북 사용하는걸 굉장히 선호하는 편인데 이런 기본적인 걸 모르다니 ,,,배울게 굉장히 많규나…⭐️ 오히려 좋아