인프런 커뮤니티 질문&답변
작성한 질문수
AvailableUsers
작성
·
37
0
시각적 회귀 테스트 강의의 Storybook 코드에서 play 함수 안에 matcher를 넣지 않고 userEvent.click(...)만 사용한 이유가 궁금합니다.
import { userEvent, within } from '@storybook/testing-library';
import AvailableUsers from '@/pages/login/components/AvailableUsers';
export default {
component: AvailableUsers,
title: '로그인/사용자 리스트',
};
export const Folded = {
name: '접힌 상태',
};
export const Expanded = {
name: '펼친 상태',
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByText('⚠️ 사용 가능한 유저 리스트'));
},
};
제가 이해한 바로는, 이 스토리는 storybook에서 아코디언이 펼쳐진 시각적 상태 변화를 보여주기 위한 용도이고,
실제 기능 로직 검증은 Vitest에서 별도의 테스트 코드로 작성하는 방향이라고 생각했습니다.
1. 여기서 play 안에 matcher를 넣지 않은 것은 Storybook을 시각적 상태 확인용으로 사용하려는 의도인가요?
2. 그리고 이 컴포넌트의 동작 검증은 Storybook이 아니라 Vitest에서 담당하도록 역할을 나눈 것으로 이해하면 될까요?
3. 실무에서는 보통 storybook을 어디까지 작성하는지 궁금합니다. - 물론 회사마다 다르겠지만, 강의해주시는 강사님 기준으로 의견을 듣고 싶습니다.
답변 1
1
@Coi님 답변 늦어 죄송합니다 ㅠㅠ
1. 여기서 play 안에 matcher를 넣지 않은 것은 Storybook을 시각적 상태 확인용으로 사용하려는 의도인가요? + 2. 그리고 이 컴포넌트의 동작 검증은 Storybook이 아니라 Vitest에서 담당하도록 역할을 나눈 것으로 이해하면 될까요?
-> 넵 맞습니다! 시각적으로 검증하기 위해 활용했다라고만 이해해주시면 됩니다. 최근 트렌드가 변함에 따라 해당 부분에 대한 테스트를 스토리북에서 진행하는것도 가능해졌다고 이해하고 있는데요. 브라우저 기반의 테스트 코드 도구들도 많이 생겼구요. 결국 목적에 따라 각각 어떤 부분을 검증할지, 어디서 작성할지 명확하게 한다면 관리하기 편한곳에서 운영하셔도 됩니다.
3. 실무에서는 보통 storybook을 어디까지 작성하는지 궁금합니다. - 물론 회사마다 다르겠지만, 강의해주시는 강사님 기준으로 의견을 듣고 싶습니다.
-> 일반적으로 실무에서는 디자인 시스템을 운영한다면 해당 부분에 대해 전반적으로 운영을 하는 편이고, 그렇지 않다면 공통 컴포넌트들에 대한 관리 목적으로 그리고 시각적 테스트를 진행하면 해당 시나리오들에 대해서만 운영을 하는 편인것 같아요! 주로 스토리북을 테스트 관점에서도 운영할 수 있지만 여러 부서들 간의 커뮤니케이션 도구로 실제 결과를 보여주는 관점에서 사용하는 경우도 많이 있어서요. 해당 부분에 대해서도 고민해보시면 좋을것 같습니다!