스토리북 테스트에 대한 질문

Question

강의 중 스토리북이 테스트를 위한 라이브러리라고 말씀하신 부분이 있는데요, 스토리북 테스트 라이브러리가 yarn pnp와 의존성 간의 충돌이 있는 것으로 보입니다.   혹시 yarn pnp 환경에서 스토리북으로 컴포넌트에 대한 테스트를 진행하고 싶으면 어떻게 진행하면 좋을까요?

jasonkang · Answer

안녕하세요! 좋은 질문 감사합니다. 저는 yarn pnp를 사용해본 적이 없어서 몰랐는데 꽤나 잘 알려진 이슈인 것 같네요. 인프런 인턴의 답변의 링크들도 시도해보시고, 제가 찾은 해결방법도 공유 드립니다 https://github.com/storybookjs/storybook/issues/18435#issuecomment-1165672499 다만 위 방법이 안된다는 사람들도 있고 스토리북 메인테이너가 yarn pnp와 협업중이라는 아래 댓글로 볼 때 아직 해결되지 않은 이슈일 수 있을 것 같습니다 https://github.com/storybookjs/storybook/issues/18435#issuecomment-2104423655

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김동훈님, 질문 주셔서 감사합니다. 스토리북은 UI 개발을 위한 매우 유용한 도구 중 하나이며, 다양한 환경에서의 통합이 가능합니다. 그러나, Yarn Plug&rsquo;n&rsquo;Play(PnP)와 통합할 때 몇 가지 주의사항이 있을 수 있습니다. 스토리북을 Yarn PnP 환경에서 사용하는 방법에 대해 몇 가지 팁을 드리겠습니다: PnP 환경 설정 : Yarn의 zero-install 기능을 활용하여 의존성 문제를 해결할 수 있습니다. yarn install 을 통해 PnP 환경을 제대로 설정해 보세요. 스토리북 설정 파일 수정 : .storybook/main.js 파일 내에서 babel 이나 webpack 설정을 수정하여 PnP 요구 사항에 맞게 조정할 수 있습니다. 예를 들어, babel 의 plugins 나 presets 를 사용할 때 PnP 경로 문제를 고려해야 할 수 있습니다. 버그 수정 패키지 사용 : yarn patch 명령어를 통해 특정 모듈의 버그를 일시적으로 수정할 수 있으며, 모듈의 소스 코드를 직접 수정해 충돌을 최소화할 수 있습니다. 의존성 문제 해결 : yarn pnpify 명령어를 사용하여 일부 Node.js 패키지를 PnP 환경에 맞게 변환하여 사용할 수 있습니다. 이는 PnP 버그와 충돌을 줄이는 데 도움이 됩니다. 스토리북과 Yarn PnP를 함께 사용하는 구체적인 사례는 다음 링크의 내용을 통해 참고하실 수 있습니다: How to Use Storybook with Yarn Plug&rsquo;n&rsquo;Play Yarn PnP 및 Storybook 통합 관련 공식 문서 위 방안을 통해 문제가 해결되길 바라며, 추가적으로 궁금한 점이 있으시면 이어서 질문해 주세요. 더 구체적인 문제나 사례에 대한 응답이 필요하다면 강의의 질의응답 게시판에 추가 정보를 남겨주시면, 지식공유자분께서 더 나은 답변을 드릴 수 있을 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.