ログインページのテストコード作成と、actの記述方法を変更

[kameiryohei]

実装意図

• テストの網羅性を向上させるために、/app/user/login/page.tsxのコンポーネントに対して単体テストを作成

実装詳細

• テストした項目を以下に示す
  • 画面に必要な要素が表示されていることの確認テスト
  • メールアドレスとパスワードが未入力の時のテスト
  • 適切なメールアドレス,パスワードの形でないものが入力された時のテスト
  • 正しくログインができた時ののテスト

詰まった点

• 正しくログインができた時のテストで、成功した時の処理でtoastを表示しているがtoastはDOM要素ではないため、要素の取得ができなかった。

• モックして挙動を確認できるか試したが、難しそうだったので一旦「ログイン中・・・」という文字列が出てくることを確認としてテストを通過させるようにした。

  • しかし、テストとしては十分ではないと考えているため、アプリ側のロジックの変更などをしてログインしたことを確認した方が良いと感じた。

• actに関しては以下の記事を参考

• actでラップしなればならないというコンソールエラーが出るが、検索して簡単なアプローチでエラーを消すことができるものを見つけ、適応させた

  • https://kajiri.dev/i-ran-an-empty-act-in-react-and-the-error-disappeared

• 追記(2024/10/11)

  • 以下のサイトを参考にmockの書き方をやってみたがエラーでテストが通らなかった。
  • 具体的にNumber of calls: 0と表示され期待した値が返ってきていないことがわかる。
  • https://blog.shinki.net/posts/jest-next-router-mock

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
class-planner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 10, 2024 1:39pm