눈에 보이는 리액트 UI 라이브러리 테스트 붙이기 (Storybook Interactions)
UI 컴포넌트는 어떤 테스트를 붙여야 할까?
최근에 리액트 기반의 UI 라이브러리를 만들 일이 있었습니다. 서비스와는 다르게 특정 페이지가 있는 것이 아니기 때문에, 컴포넌트를 만들 때마다 화면에 그려보기 위해 선택한 도구는 평소에 애용하던 Storybook이었습니다. 서비스와 분리하여 시각적으로 UI를 확인하기엔 최적의 도구라고 생각하는데, 한 가지 고민은 코드 레벨에서의 테스트였습니다. 특히, 단순 기능 동작이 아닌, 스타일이나 스크롤 같은 변화를 감지할 필요가 있었는데, jest나 react-testing-library에서는 이런 부분이 정확히 확인이 어려웠습니다 (이미 작성한 스토리를 재활용하여 테스트를 붙일 수 있게 해주는 testing-react addon).
단순히 값이 변화하는지의 문제보단 눈으로 봤을 때 어색함 없이 연속적으로 작동하는지 확인하는 자동화된 테스트 코드가 필요했습니다.
Cypress + Storybook?
화면 위에서 실제로 인터렉션이 발생할 때 컴포넌트가 원하는 형태로 동작하고 스타일이 변하는지 확인하려면 E2E 테스트처럼 코드를 작성할 수 있지 않을까 해서 Cypress를 알아보았습니다. 로컬에서 Storybook 페이지를 연 뒤, Cypress 테스트를 붙이는 방법도 몇몇 분들이 제시하고 있는 방법이었지만 Storybook의 iframe을 로드하는 과정이 상당히 복잡하고, 컴포넌트가 여러 개라면 url로 접근하는 방식도 상당히 짐이 될 거 같았습니다. 포기해야 하나 고민하던 찰나에 Storybook Interactions을 발견하였습니다 (공식 문서 최신 정보를… 열심히 살펴봐야 했는데…😇).
Storybook Interactions addon + play function
별도의 도구 없이 addon으로 Storybook 화면 위에서 바로 상호작용 테스트를 가능하게 해주는 것이 Storybook의 Interactions addon과 play 함수입니다. 이를 활용하면 기존의 리액트 테스팅 도구로써 testing-react addon 이 갖는 한계를 어느 정도 극복할 수 있습니다. (공식 문서 참조)
- 인터렉션 테스트를 위해 별도의 테스트 도구 사용 불필요
node,jsdom에 의존하지 않고 실제 브라우저 위에서 동작 확인 가능- 별도 test 파일 생성 불필요 (스토리 파일에 작성 가능)
이 외에도 test-runner와 같은 addon을 이용하여 한번에 테스트를 실행해 볼 수 있고 github action 등에 부착하여 CI 흐름에 포함할 수도 있습니다.
사용 및 설치 방법
공식 문서의 가이드대로 설정을 마치고 jest 문법으로 직접 원하는 테스트를 붙여볼 수 있습니다. 이렇게 하면 Storybook에서 스토리에 진입하면 설정해 둔 상호작용이 실행되면서 테스트를 진행하는 걸 확인할 수 있습니다.
사용 감상
컴포넌트 양이 많은 라이브러리를 개발한 것은 아니었으나, 하나의 거대한 컴포넌트고 브라우저 위에서 기능이 잘 동작하는지 확인해야 했던 제 입장에선 최적의 선택이었습니다. 애초에 개발 중인 화면이나 페이지가 있는 것도 아니기 때문에 개발 중에 Storybook은 필수였는데, 이를 재활용할 수 있게 해주는 것만으로도 많은 시간이 절약되었습니다. 본격적인 리팩토링을 진행하기 전에 조금 더 복잡하고 다양한 동작을 붙여보면 향후 개발 때 제가 놓칠 수 있는 동작 오류도 미리 잡을 수 있을 거라 기대해 봅니다.