이번 주는 몇가지 storybook addon에 대해 조사해 보았다.
storybook-addon-a11y
storybook/code/addons/a11y at next · storybookjs/storybook
웹 접근성을 체크해 주는 addon이다.
addon 있을 때
addon 없을 때
탭에서 Accessibility가 추가된 것을 확인할 수 있고, 어떤 부분이 잘못되었는지 친절하게 알려준다.
위 사진에서 나온 잘못된 부분은 색상 대비가 4.5:1 비율로 나와야하는데 3.47:1로 나왔다고 한다.
Storybook Addon Cssresources
https://github.com/storybookjs/addon-cssresources
테마 변경을 보여줄 때 사용하면 좋을 것 같아서 알아보았다. 그런데 버전 관리가 너무 안되고 있는 것 같아서 사용하기에는 힘들 것 같다.
theme 적용한 후 모습
theme 적용하기 전 모습
개인적으로 theme 적용 확인을 위해 정말 사용하고 싶은데 버전 관리가 안되는 점이 너무너무 아쉽다.
Storybook addon Jest
storybook/code/addons/jest at next · storybookjs/storybook
jest를 이용한 unit 테스트를 할 수 있다.
🚨트러블 슈팅
@storybook/addon-a11y을 설치 후 pnpm dev 시 아래와 같은 에러가 발생했다.
✘ [ERROR] Could not resolve "@storybook/icons"
../../node_modules/.pnpm/@storybook+addon-a11y@8.1.1/node_modules/@storybook/addon-a11y/dist/manager.js:6:77:
6 │ ...eckIcon } from '@storybook/icons';
╵ ~~~~~~~~~~~~~~~~~~
You can mark the path "@storybook/icons" as
external to exclude it from the bundle, which
will remove this error.
Error: Build failed with 1 error:
../../node_modules/.pnpm/@storybook+addon-a11y@8.1.1/node_modules/@storybook/addon-a11y/dist/manager.js:6:77: ERROR: Could not resolve "@storybook/icons"이는 @storybook/icons라는 라이브러리가 없기 때문에 발생하는 에러였다. pnpm add @storybook/icons -D로 설치를 해주었고 다시 pnpm dev를 실행했더니 다른 에러가 발생했다.
✘ [ERROR] No matching export in "global-externals:@storybook/components" for import "EmptyTabContent"
../../node_modules/.pnpm/@storybook+addon-a11y@8.1.1/node_modules/@storybook/addon-a11y/dist/manager.js:4:89:
4 │ ...Spaced, EmptyTabContent } from ...
╵ ~~~~~~~~~~~~~~~
SB_CORE-SERVER_0004 (NoMatchingExportError): There was an exports mismatch error when trying to build Storybook.
Please check whether the versions of your Storybook packages match whenever possible, as this might be the cause.
Problematic example:
{ "@storybook/react": "7.5.3", "@storybook/react-vite": "7.4.5", "storybook": "7.3.0" }
Correct example:
{ "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" }
Please run `npx storybook@latest doctor` for guidance on how to fix this issue.npx storybook@latest doctor를 실행하면 어떻게 해결할지 알려준다고 문구가 나온다.
🩺 The doctor is checking the health of your Storybook..
╭ Incompatible packages found ─────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ The following packages are incompatible with Storybook 7.6.17 as they depend on different major versions of │
│ Storybook packages: │
│ - @storybook/addon-a11y@8.1.1 │
│ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/a11y │
│ │
│ │
│ Please consider updating your packages or contacting the maintainers for compatibility details. │
│ For more on Storybook 8 compatibility, see the linked GitHub issue: │
│ https://github.com/storybookjs/storybook/issues/26031 │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
You can always recheck the health of your project by running:
npx storybook doctor
log 파일도 생긴다!
@storybook/addon-a11y의 버전이 8.1.1 였는데 버전이 안 맞아서 발생하는 오류였다.
고마워요 storybook docor!
따라서 version history에서 다운로드가 가장 많은 7.6.19 버전으로 다운그레이드 시켰더니 정상적으로 동작했다!
돌아보며
테스트 시 어떻게 할 지 정해진 것은 다음과 같다.
- @testing-library/react, jest (컴포넌트 로직 검증 + 상호작용 테스트)
- playwright (웹 접근성 테스트 + 브라우저별 테스트 가능)
9주차 자료 조사를 많이 하지 못하여 아쉬웠다. 다시 시간 투자를 많이 해야겠다고 생각하는 9주차였다...!
다음 주까지 할 일
- icons 관련 자동화
- 세팅 마저하기
