[Feat] 팔로우 컴포넌트 테스트 코드 작성 #215
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 안내팔로잉 페이지 관련 컴포넌트의 단위 테스트 코드를 추가하는 변경사항입니다. 변경사항
코드 리뷰 예상 난이도🎯 3 (중간) | ⏱️ ~20분
추천 레이블
추천 리뷰어
시
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (3)
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
📊 Coverage Report
📈 #215을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #215 +/- ##
===========================================
+ Coverage 31.46% 34.65% +3.19%
===========================================
Files 163 164 +1
Lines 7224 7238 +14
Branches 255 255 0
===========================================
+ Hits 2273 2508 +235
- Misses 4951 4730 -221 영향받은 파일
|
There was a problem hiding this comment.
FollowingNone 컴포넌트 자체를 테스트하고 있는데, 크게 의미가 없어보여요
message/page.test.tsx로 이관 후, followers가 0명이면 message-following-none 컴포넌트가 보여지는지 테스트 하는게 더 좋을 것 같아요!
There was a problem hiding this comment.
message-following-search 컴포넌트를 지금봤는데, 이 파일 내부에서 모달과 팔로우 추가 버튼 둘다 관리하고 있네용
- 모달을 별도 파일로 분리하기(message-following-modal ? )
- 모달 내부에서 input값을 현재 직접 state로 제어하는 방식 => tanstack form 관리 방식으로 수정
- errorMessage를 zod로 제어하기
프로젝트 통일성을 위해 이 정도로 수정되면 좋을 것 같습니다!
| jest.mock('@/hooks/use-follower', () => ({ | ||
| useAddFollowers: jest.fn(), | ||
| })); |
There was a problem hiding this comment.
test를 위해 별도의 queryclient를 만들었는데, react query mutation을 사용하는 useAddFollowers도 모킹을 하고 있네요!
사실 api/follower-service의 addFollower만 모킹을 해주면 useAddFollowers를 모킹할 필요가 없어요!
실제로 이렇게 하는게 더 좋은 이유가 테스트 코드 작성 시 실제 동작과 최대한 가깝게 테스트를 해야하기 때문이에요.
// as-is
message-following-search => useAddFollowers(모킹)
// to-be
message-following-search => useAddFollowers => addFollowers(모킹)
이렇게 하면 react query의 내부 상태를 전부 정상적으로 사용할 수 있고, 테스트 코드를 더 유연하게 작성할 수 있을 것으로 보이네요!
app/(user)/profile/[userId]/page.test.tsx를 확인해보시면 api 호출 함수만 모킹해놓고, page가 알아서 동작하게 만든 다음 테스트를 진행하도록 작성했는데, 여기 구문 참고해보시면 좋을 것 같네요 :)
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
src/components/pages/message/message-following-none/index.test.tsx (1)
5-10: 상위 페이지 테스트로 통합을 권장합니다.FollowingNone 컴포넌트를 독립적으로 테스트하는 것보다,
message/page.test.tsx에서 followers가 0명일 때 이 컴포넌트가 렌더링되는지 통합 테스트하는 것이 더 의미있는 테스트가 될 것입니다.src/components/pages/message/message-following-search/index.test.tsx (1)
9-11: API 서비스 레벨에서 모킹하는 것을 권장합니다.현재
useAddFollowers훅을 모킹하고 있지만, 실제로는api/follower-service의addFollower함수만 모킹하는 것이 더 좋습니다. 이렇게 하면:
- React Query의 내부 상태를 정상적으로 사용 가능
- 실제 동작에 더 가까운 테스트 수행 가능
- 테스트 코드의 유연성 향상
app/(user)/profile/[userId]/page.test.tsx를 참고하시면 API 호출 함수만 모킹하고 컴포넌트가 자연스럽게 동작하도록 작성된 예시를 확인할 수 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/pages/message/message-following-none/index.test.tsx(1 hunks)src/components/pages/message/message-following-search/index.test.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-17T09:40:37.733Z
Learnt from: HopeFullee
Repo: WeGo-Together/WeGo_FrontEnd PR: 205
File: src/components/pages/post-meetup/fields/cap-field/index.tsx:47-47
Timestamp: 2025-12-17T09:40:37.733Z
Learning: In TanStack Form with Zod validation, when field.state.meta.isValid is false, field.state.meta.errors is guaranteed to have at least one entry. Therefore, in an isInvalid check defined as field.state.meta.isTouched && !field.state.meta.isValid, safely access field.state.meta.errors[0] without extra null/empty checks. This guideline applies to TSX form fields under src/components/pages (and similar forms using the same pattern).
Applied to files:
src/components/pages/message/message-following-none/index.test.tsxsrc/components/pages/message/message-following-search/index.test.tsx
| describe('Following None 컴포넌트 테스트', () => { | ||
| test('Following None 렌더링 테스트', () => { | ||
| render(<FollowingNone />); | ||
| expect(screen.getByText('아직 팔로우 한 사람이 없어요.')); |
There was a problem hiding this comment.
단언문(assertion)이 누락되어 테스트가 무의미합니다.
screen.getByText()만 호출하고 있으며 .toBeInTheDocument()와 같은 assertion 메서드가 없습니다. 이 상태에서는 요소가 존재하는지 검증하지 않습니다.
🔎 수정 제안
- expect(screen.getByText('아직 팔로우 한 사람이 없어요.'));
+ expect(screen.getByText('아직 팔로우 한 사람이 없어요.')).toBeInTheDocument();🤖 Prompt for AI Agents
In src/components/pages/message/message-following-none/index.test.tsx around
line 8, the test only calls screen.getByText('아직 팔로우 한 사람이 없어요.') without an
assertion, making the test ineffective; update the expectation to assert
presence (e.g., wrap the call with expect(...).toBeInTheDocument()) so the test
actually verifies the element exists, ensuring jest-dom matchers are available
or imported if needed.
| fireEvent.click(screen.getByText('팔로우')); | ||
|
|
||
| // 에러 div 체크 | ||
| expect(screen.getByText('존재하지 않는 유저입니다.')); |
There was a problem hiding this comment.
단언문(assertion)이 누락되어 테스트가 무의미합니다.
screen.getByText()만 호출하고 있으며 .toBeInTheDocument()와 같은 assertion 메서드가 없습니다. 이 상태에서는 에러 메시지가 존재하는지 제대로 검증하지 않습니다.
🔎 수정 제안
- expect(screen.getByText('존재하지 않는 유저입니다.'));
+ expect(screen.getByText('존재하지 않는 유저입니다.')).toBeInTheDocument();🤖 Prompt for AI Agents
In src/components/pages/message/message-following-search/index.test.tsx around
line 120, the test calls screen.getByText('존재하지 않는 유저입니다.') but lacks an
assertion so it doesn't actually verify presence; replace the bare call with an
assertion such as expect(screen.getByText('존재하지 않는 유저입니다.')).toBeInTheDocument()
(or .toBeVisible()) and ensure @testing-library/jest-dom is imported/configured
in the test setup so the matcher is available.
|
|
||
| fireEvent.click(screen.getByText('팔로우')); | ||
|
|
||
| expect(screen.getByText('존재하지 않는 유저입니다.')); |
There was a problem hiding this comment.
단언문(assertion)이 누락되어 테스트가 무의미합니다.
screen.getByText()만 호출하고 있으며 .toBeInTheDocument()와 같은 assertion 메서드가 없습니다. 에러 메시지가 표시되는지 검증하려면 assertion을 추가해야 합니다.
🔎 수정 제안
- expect(screen.getByText('존재하지 않는 유저입니다.'));
+ expect(screen.getByText('존재하지 않는 유저입니다.')).toBeInTheDocument();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect(screen.getByText('존재하지 않는 유저입니다.')); | |
| expect(screen.getByText('존재하지 않는 유저입니다.')).toBeInTheDocument(); |
🤖 Prompt for AI Agents
In src/components/pages/message/message-following-search/index.test.tsx around
line 156, the test calls screen.getByText('존재하지 않는 유저입니다.') but lacks an
assertion, so it doesn't actually verify the message is present; update the test
to assert the element is in the document (for example, wrap the getByText call
in an expect(...).toBeInTheDocument() or use a suitable jest-dom matcher) so the
test fails when the error message is not rendered.
wooktori
force-pushed
the
hwanwook-feat/follow-test
branch
from
6754251 to
29446e3
Compare
📝 변경 사항
테스트 코드 주요 패턴 설명 (useAddFollowers mock)
1. 커스텀 훅 mock 처리
2. 테스트 공통 초기화
3. 성공 케이스 테스트 패턴
🔗 관련 이슈
Closes #201
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
테스트
✏️ Tip: You can customize this high-level summary in your review settings.