はじめに
「テストコード書かなきゃ...でもモックするのめんどくさいな...」
こんな経験、ありませんか？恥ずかしながら私はしょっちゅうあります😭
特にVueコンポーネントのテストでは、ちょっと作りの入り組んでしまったコンポーネントの場合、動作させるためのモックの準備が大変ですよね。
私もそんな悩みを抱えていましたが、最近はVSCode拡張機能の「Roo-Code」を使ってテストコードの1歩目をサクッと書けるようになり、この悩みがかなり解消されました。
Roo-Codeとの出会い 🤝
mizchiさんの記事を見て使い始めた口なので詳しくは以下の記事をみてもらうといいかと思います。
兎にも角にも使い始めてみて、すぐに効果を感じたのがテストでした。
いままでもGithub Copilotは使っていて、テストコード作成のサポートとしても便利でしたが、あくまで副操縦士という立ち位置でした。
一方、Roo-Codeは「このファイルのvitestのテストコードを書いて」「Storybookのストーリーを作成して」「Playwrightでテストを書いて」といった指示に対して、適切なテストやストーリーを自律的に作成してくれる、まさに優秀なペアプログラマーのような存在です。
Roo-Codeの便利な点 💡
1. めんどくさいモックが必要なテストの自動生成
- 複雑なデータ構造もzodスキーマを満たす適当なデータを作ってくれる
- vitestやStorybookで実は良く知らない機能を使ってくれるので勉強になる
- 込み入ったコンポーネントに対する網羅性の高いテストを書いてくれる
- 「そうじゃない」ところは突っ込むとすぐさま直してくれる
こういった作業を高速で処理してくれるため、テストの追加や拡充が非常にスムーズに進められます。
実際の開発フロー 🔄
- Roo-Codeを活用したコンポーネントの実装（必要に応じて手動で調整）
- Roo-Codeを使用したStorybookストーリーの作成
- Roo-Codeを使用したユニットテストの作成
- Roo-Codeを使用したE2Eテストの作成
- 作成したテストの実行と必要な調整
この開発フローにより、モックの準備に時間を取られることなく、効率的にテストを作成できています。
まとめ
Roo-Codeを使うことで、私にとっては特にUIのテストにおける「モックの準備」が大幅に効率化されました。
- vitestのモックが自動生成される
- playwrightのAPIモックが簡単に設定できる
- Storybookのストーリーが網羅的に生成される
テストを書くのが億劫だった状態から、「よし、とりあえずざっとテスト書いといて！」ができるようになり、「動くテストがあるし拡張してくか！」と気軽に取り組めるようになりました。
これからもRoo-Codeを活用して、テストコードを効率的に書いていきたいと思います。
Discussion