스토리북 설치하기

스토리북 사용하기

프로젝트를 진행하면서 현재 컴포넌트를 만들고 있다. 실제로 이제 스타일링을 적용하고 이벤트를 적용하는 과정에서 잘 동작하는지를 원하는데로 잘 구현이 되는지 확인해 보고 싶었다.
처음엔 마크업을 다른 tsx파일에 작성해 한번 테스트를 해볼까 했지만 최근 테스트 관련한 글을 읽고 UI가 잘 나오는지 확인하기 위해서 스토리북을 사용하는 글을 본적이 있어 스토리북을 사용해 보게 되었다.

문제 발생

storybook을 설치하면서 발생한 문제점이나 의문점들이 발생한 부분에 대해 정리하려한다.

설치환경

• yarn berry
• next.js
• storybook v6
• babel-loader v8
• @babel/core v7이슈

1. node_modules파일이 생성되었다...
   • node_linker의 경우 pnp로 지정을 하였기 때문에 압축된 형식으로 의존성이 설치 되어야 한다.
   • .yarn/cache파일에 설치가 안되고 다른 의존성 폴더를 만들어 해결 할 방법을 찾아보았지만 방법을 찾지 못하였고 실제로 node_modules로 그냥 두고 사용하는 경우도 있다는 것을 보게 되어 냅두기로 하였다.
   • 설치되는 형식도 압축된 파일로 나오기 때문에 찜찜하지만 그냥 넘어가게 되었다.
2. Ancestor breaking the chain: @storybook/addon-docs
   babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7’
   • 99% done plugins webpack-hot-middlewarewebpack 메시지가 뜨고 더 이상 실행이 되지 않는 현상 발생하였고 위의 에러메시지를 확인해보니 주 된이유가 2번이라고 판단 하였다.
   • https://github.com/storybookjs/storybook/issues/18435
     해당 링크를 통해 yarnrc의 package extenstion에 bable core 버전을 명시함으로써 문제를 해결 할 수있다.
   • package extension 이란?
     일부 종속성의 버전이 잘 못 지정될 경우 yarn에서 누락시키는 현상이 발생함으로 인해 babel loader 8버전을 쓰기위해서 babel-core의 버전을 7을 사용하라는 에러메시지가 발생 하였다. package.json파일에선 7버전대를 사용하고 있었기 때문에 yarnrc파일에 다음과 같이 추가하여 문제를 해결 하였다.

"@storybook/addon-docs@*": 
	dependencies: 
    	"@babel/core": "*"

referene

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

Storybook doesn't work with yarn PnP · Issue #18435 · storybookjs/storybook

https://yarnpkg.com/configuration/yarnrc

Configuration options

https://jbee.io/react/testing-4-react-testing/

[Testing] 4. 컴포넌트 테스트와 검증