인프런 커뮤니티 질문&답변

안녕하세요.

이전글에 이어서 Interaction 테스트를 하는 과정에서 발생한 이슈 공유드립니다.

[명령어가 다른 문제]

확인해보시면 아시겠지만, Interaction 테스트를 위해 강의에서 설치한 명령어와 현재 공식문서에 작성되어있는 명령어가 다릅니다.

• 강의: @storybook/jest, @storybook/testing-library

• 문서: @storybook/test

설치항목이 줄어들었지만, 최신화된 공식문서의 내용을 따라가도 정상적으로 동작함을 확인했습니다.

[스토리북 실행시 에러 발생]

No matching export in "global-externals:@storybook/components

스토리북을 실행하면 상단에 작성한 문제가 발생할 수 있는데, 저의 경우에는 .nodemodules 디렉토리를 삭제하고 @storybook/components @storybook/addons

먼저 설치한 후 다시 공식문서에서 제공하는 명령어를 통해 설치하여 해결했습니다. 하단의 링크를 참고하시면 됩니다.

https://github.com/storybookjs/storybook/issues/24906

(+추가적으로 @storybook/vue3 를 설치해야 Meta, StoryObj를 불러올 수 있습니다.)

[스토리북 테스트 실패]

LoginForm 컴포넌트와 스토리를 만드는 과정에서 코드를 복사하여 가져올 때, EmptyForm과 FilledForm의 render 부분을 주석처리해야 테스트가 통과됨을 확인했습니다.