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
  1. 테스트 코드 자동 재생

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

DOCS

좋은 웹페이지 즐겨찾기