Automated Testing(테스팅 자동화)
스토리북은 손쉽게 UI 시각 테스트가 가능하게 해준다.
개발을 진행하면서 UI 테스트를 위해 개발 작업을 중단하는 일이 발생하지 않게 도와주는데,
이 단계가 완전히 '수동적'으로 진행되는 프로세스를 가졌기 때문에 결국 누군가는 일일히 각 테스트 단위를 클릭하며 오류나 경고가 발생하지 않는지 확인하는 절차를 거쳐야 한다.
좀 더 생산적으로 이 단계를 자동화 할 수는 없을까?
Snapshot testing
스냅샷 테스트는 특정 입력에 대해 컴포넌트의 "known good(알려진 good?)" 출력을 기록한 후, output(출력)이 변경될 때마다 컴포넌트에 플래그를 지정하는 방식을 말한다.
컴포넌트의 변경사항을 확인할 수 있는 빠른 방법으로,
위에서 언급한 스토리북의 단점을 보완해 줄 수 있는 방식이다.
먼저 컴포넌트가 '변경되지 않는' 데이터만 렌더링 하게 테스트 케이스를 구현하도록 한다.
이 경우 매번 스냅샷 테스트가 실패(fail) 하게 된다. (날짜나, 랜덤하게 생성되는 값 등을 주의할 것)
스냅샷 테스트를 하기 위해서 Storybook 에서 제공되는 addon (확장기능) 을 하나 추가해줘야 한다.
반응형 테스트 지원, 접근성 지원 등 다양한 애드온이 제공되는데, 애드온의 각 응용법은 추후에 다뤄보는것으로 하고 이 글에서는 스냅샷 테스트에 필요한 Storyshots 애드온을 추가하여 테스팅 자동화 방법에 초점을 맞추어 작성해본다.
의존성 모듈을 추가하자!
npm i -D @storybook/addon-storyshots react-test-renderer설치 후 src/storybook.test.js 파일을 신규 생성한다.
src/storybook.test.js
import initStoryshots from '@storybook/addon-storyshots';
initStoryShots();이제 터미널을 새로 띄워서 npm run test 를 구동시켜보자.
아래 이미지처럼 굳이 모든 테스트케이스를 클릭해보지 않아도 터미널에서 Test 결과를 알 수 있다.
이전에 작성한 Default, Pinned , Archived 테스트 케이스 모두 Passed 되었다.
억지로 오류를 발생시켜 보자.
Task.stories.tsx
... // 상단 코드 동일, state 값을 'TASK_ARC'라는 유효하지 않은 값으로 전달.
export const Archived = () => (
<Task task={{ ...taskData, state: 'TASK_ARC' }} {...actionsData} />
);재실행 Test 결과
- 어떤 Test case에서 실패했는지 알려줌
- 결과의 기대값과(
-Snapshot: 초록 라인), 실제 어떻게 실행되었는지 알려줌 (+Received: 빨간색 라인)
반면, Storybook 앱은 Test 통과 여부와는 상관 없이 화면이 구동된다.(당연하다.)
눈에 보이는 오류가 왜 안뜨지..? 하며 Archived 항목을 클릭했더니 아래 이미지처럼 기대했던바와 다르게 UI적 오류를 보여주고 있다
(기대 View : 체크박스가 Checked 되어있고, Pin 버튼이 없어야 함)
이렇게 '눈으로 봐야' 확인이 되는 모호한 오류를 커맨드창을 통해 어떤 부분이 문제였는지 직관적으로 알 수 있게 해주므로 개발자 입장에서는 많은 시간을 아낄수 있는것은 분명하다😃
다음 글에서는 Task 컴포넌트로 TaskList 컴포넌트를 조립하는 글을 다룬다.
(Simple 컴포넌트를 복합 컴포넌트로 구성하기)
