search

r-sugi / nextjs-tdd-template

https://nextjs-tdd-templatestorybook-rsugis-projects.vercel.app
0 stars 0 forks source link

UT: Jest + msw2 でコンポーネントテスト(ブラックボックス) mutation #153

Closed r-sugi closed 2 months ago

r-sugi commented 2 months ago

User description

124

PR Type

tests, enhancement

Description

Changes walkthrough 📝

Relevant files
Tests
jest.setup.ts
Add mock for next/router in Jest setup                                     
jest.setup.ts
  • Added mock implementation for next/router.
  • Enhanced testing setup for routing.
    		•  +24/-0   
    index.test.tsx
    Add black-box tests for resign member input                           
    src/feature/mypage/resignMember/input/index.test.tsx
  • Implemented black-box tests using Jest and Testing Library.
  • Added tests for form submission and cache storage.
  • Utilized mock functions for router and cache.
    		•  +67/-3   
    Enhancement
    index.tsx
    Improve accessibility of form elements                                     
    src/feature/mypage/resignMember/input/index.tsx
  • Updated form elements with accessible labels.
  • Improved form accessibility by adding aria-labelledby and htmlFor.
    		•  +7/-5     

    💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

    vercel[bot] commented 2 months ago

    The latest updates on your projects. Learn more about Vercel for Git ↗︎

    Name Status Preview Comments Updated (UTC)
    nextjs-tdd-template_storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2024 7:02am
    github-actions[bot] commented 2 months ago

    PR Reviewer Guide 🔍

    ⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
    🧪 PR contains tests
    🔒 No security concerns identified
    ⚡ Key issues to review

    モックの詳細
    `next/router`のモックには多くのメソッドが含まれていますが、実際に必要なメソッドのみをモックすることを検討してください。不要なメソッドのモックは、テストの複雑さを不必要に増加させる可能性があります。 テストの独立性
    各テストケースで`setup`関数を呼び出していますが、これによりテスト間での状態の分離が不十分になる可能性があります。`beforeEach`を使用して各テストの前に環境を設定することを検討してください。
    github-actions[bot] commented 2 months ago

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Score
    Accessibility
    フォームのアクセシビリティを向上させるために label 要素に htmlFor 属性を追加します。 ___ **label 要素に htmlFor
    属性を追加することで、アクセシビリティを向上させます。これにより、スクリーンリーダーがフォーム要素をより正確に識別できるようになります。** [src/feature/mypage/resignMember/input/index.tsx [35]](https://github.com/r-sugi/nextjs-tdd-template/pull/153/files#diff-5e4b04d341135a202132795cac1ab6de346d2f65f8f56ceeb622c0472cfddc45R35-R35) ```diff - + ```
    Suggestion importance[1-10]: 8 Why: Adding `htmlFor` to the `label` element significantly improves accessibility, which is important for users relying on screen readers, making this a valuable enhancement.
    		8
    select 要素の属性を変更してフォームのアクセシビリティを向上させます。 ___ **select 要素の aria-labelledby 属性を id
    属性に変更して、フォームのアクセシビリティを向上させます。これにより、スクリーンリーダーがフォーム要素をより正確に識別できるようになります。** [src/feature/mypage/resignMember/input/index.tsx [36]](https://github.com/r-sugi/nextjs-tdd-template/pull/153/files#diff-5e4b04d341135a202132795cac1ab6de346d2f65f8f56ceeb622c0472cfddc45R36-R36) ```diff - ```
    Suggestion importance[1-10]: 8 Why: Changing `aria-labelledby` to `id` for the `select` element improves accessibility by ensuring better identification by screen readers, which is a beneficial change for accessibility.
    		8
    Best practice
    useRouter モックの実装を改善してテストの可読性と保守性を向上させます。 ___ **useRouter モックの実装で routerMock を直接返すのではなく、jest.fn()
    を使用して、適切なモック関数を設定してください。これにより、テストの意図が明確になり、テストの可読性と保守性が向上します。** [src/feature/mypage/resignMember/input/index.test.tsx [36-38]](https://github.com/r-sugi/nextjs-tdd-template/pull/153/files#diff-b041cb4ff17cc8ef2866bd1830090f81b978ac4e017b8d4df19e800e1f7630a9R36-R38) ```diff const useRouterMockImplementation = () => ({ - push: routerMock, + push: jest.fn().mockImplementation(() => Promise.resolve(true)), }); ```
    Suggestion importance[1-10]: 7 Why: Using `jest.fn()` for the `useRouter` mock implementation enhances test readability and maintainability, which is a good practice, but it is not a critical change.
    		7
    Enhancement
    モック関数のデフォルトの戻り値を設定することでテストの安定性を向上させます。 ___ **`jest.fn()` でモックされた関数のデフォルトの戻り値を設定してください。これにより、テストの意図が明確になり、テストの安定性が向上します。** [jest.setup.ts [14-23]](https://github.com/r-sugi/nextjs-tdd-template/pull/153/files#diff-a1c786cdea90125d840669112d499d337a658bf6431a8c972a2e14301d908662R14-R23) ```diff jest.fn().mockResolvedValue(true), jest.fn().mockResolvedValue(true), -jest.fn(), -jest.fn(), jest.fn().mockResolvedValue(undefined), -jest.fn(), -jest.fn(), -jest.fn(), -jest.fn() +jest.fn().mockResolvedValue(undefined), +jest.fn().mockResolvedValue(undefined), +jest.fn().mockResolvedValue(undefined), +jest.fn().mockResolvedValue(undefined), +jest.fn().mockResolvedValue(undefined), +jest.fn().mockResolvedValue(undefined) ```
    Suggestion importance[1-10]: 5 Why: Setting default return values for mocked functions can improve test stability and clarity, but the suggestion does not address a critical issue and the existing code already provides some default behavior.
    		5