기존에 Storybook 을 설정을 한 상태로 시작했습니다
yarn add --dev @storybook/addon-interactions @storybook/testing-library
module.exports = {
stories:[],
addons:[
// Other Storybook addons
'@storybook/addon-interactions', //👈 The addon registered here
};
// ... 생략
// 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);
};
yarn storybook
위에서는 예시용으로 간단하게 테스트 코드를 작성했고 복잡한 상황도 작성이 가능