test(components): 에러바운더리 및 header/mypage 컴포넌트 테스트 #352
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request significantly increases test coverage across multiple components, including ErrorPage, QueryErrorBoundary, Notification components, ProfileModal, and ReviewCard. It also refactors the NotificationCard for improved accessibility and styling, while updating mock data and test descriptions for consistency. The review feedback suggests enhancing test reliability by replacing direct DOM queries and fireEvent with Testing Library's userEvent and more semantic queries.
| test("지원하지 않는 이미지 형식이면 형식 제한 메세지가 보인다", async () => { | ||
| renderProfileImage(); | ||
| const textFile = createImageFile({ name: "profile.txt", type: "text/plain" }); | ||
| const fileInput = getFileInput(); | ||
|
|
||
| fireEvent.change(fileInput, { | ||
| target: { files: [textFile] }, | ||
| }); |
There was a problem hiding this comment.
fireEvent 대신 userEvent를 사용하여 실제 사용자의 동작(포커스, 이벤트 발생 순서 등)을 더 정확하게 시뮬레이션하는 것이 좋습니다. 이미 userEvent가 설정되어 있으므로 이를 활용하도록 수정합니다.
test("지원하지 않는 이미지 형식이면 형식 제한 메세지가 보인다", async () => {
const { user } = renderProfileImage();
const textFile = createImageFile({ name: "profile.txt", type: "text/plain" });
const fileInput = getFileInput();
await user.upload(fileInput, textFile);
There was a problem hiding this comment.
@gemini-code-assist 해당 테스트는 브라우저의 파일 선택 제한을 우회해서 업로드 하는 경우 유효성 검사가 제대로 이루어지는지를 테스트하는 것입니다. 실제컴포넌트는 input의 accept에 이미지 조건이 있기때문에 일반적인 userEvent 사용시 테스트가 불가능합니다.
There was a problem hiding this comment.
제공해주신 상세한 설명 감사합니다. 해당 테스트의 목적이 브라우저의 파일 선택 제한을 우회하여 유효성 검사를 확인하는 것이라면, fireEvent를 사용하여 직접 이벤트를 발생시키는 것이 적절합니다. userEvent는 실제 사용자 동작을 시뮬레이션하므로, input의 accept 속성에 의해 .txt 파일 업로드가 제한될 수 있습니다. 따라서 기존 fireEvent 사용이 올바른 접근입니다.
|
🧷 Preview: https://reboot-5m7246u2s-code-base.vercel.app |
1 participant
🛠️ 설명 (Description)
공통 컴포넌트 내 에러바운더리 및 header 와 mypage 의 컴포넌트 테스트코드 작성 및 접근성 관련 코드 추가
📝 변경 사항 요약 (Summary)
💁 변경 사항 이유 (Why)
✅ 테스트 계획 (Test Plan)
🔗 관련 이슈 (Related Issues)
☑️ 체크리스트 (Checklist)
👀 리뷰어를 위한 참고 사항 (Notes for Reviewers)
➕ 추가 정보 (Additional Information)