storybook 에서 테스트 시나리오 작성하기

기존에 Storybook 을 설정을 한 상태로 시작했습니다

의존성 추가

yarn add --dev @storybook/addon-interactions @storybook/testing-library

.storybook/main.js

module.exports = {
  stories:[],
  addons:[
    // Other Storybook addons
    '@storybook/addon-interactions', //👈 The addon registered here
};

사용자 예상 시나리오 작성

1. 메모 작성
2. 비밀번호 2자리 작성
3. 등록 버튼 클릭
4. 등록 불가
5. 에러메세지 렌더링
   5-1. 이름 필수 안내
   5-1. 패스워드는 4자리 입력 안내

// ... 생략
// Template 을 활용해 FilledForm 생성
export const FilledForm = Template.bind({});
// 테스트 시나리오
FilledForm.play = async () => {
  	// "메모" 값을 가진 label 의 textarea 접근
	const memoTextarea = screen.getByLabelText("메모", {
		selector: "textarea",
	});
  	// memo element 에 값 입력
  	// 이때 delay 사용해서 입력 속도 설정
	await userEvent.type(memoTextarea, "안녕하세요\n듀오구해요!!@@", {
      	// 보통은 100~200 많이 사용
		delay: 500,
	});
  	// "삭제 비밀번호" 값을 가진 label 의 input 접근
	const passwordInput = screen.getByLabelText("삭제 비밀번호", {
		selector: "input",
	});
	// password element 에 값 입력
	await userEvent.type(passwordInput, "12", {
		delay: 500,
	});
	// 등록 버튼 element 접근
	const submitButton = screen.getByText("등록");
	// 등록 버튼 클릭
	await userEvent.click(submitButton);
};

1. 예상 시나리오 기획
2. 예상 시나리오 테스트 코드 작성
3. storybook 실행

yarn storybook

4. 테스트 코드 자동 재생

위에서는 예시용으로 간단하게 테스트 코드를 작성했고 복잡한 상황도 작성이 가능

DOCS