最近はフロントエンドまわりの開発をあれこれやっている中で、テスト駆動な開発をしたいのでVisual Studio Codeでテスト環境を整えていきたいと思います。
はじめに
今回は、コンテナ内で開発方法は使用せずに進めていきますので、ホスト側にお好きな方法でNode.jsの実行環境を構築してください。anyenv
やasdf
を使用した環境構築はおすすめです。
- GitHub - anyenv/anyenv: All in one for **env
- asdfが便利だったので乗り換えた - とことんDevOps | 日本仮想化技術が提供するDevOps技術情報メディア
↓🔰Visual Studio Codeのインストールが初めての方向け🔰↓
Visual Studio Codeをインストールしよう(Mac編) - Speaker Deck
↓🔰Visual Studio Codeの画面構成がよく分からない人向け🔰↓
Visual Studio Codeの画面のあれこれ - Speaker Deck
Jestとは
Meta(旧 Facebook)によってメンテナンスされているJavaScriptテストフレームワークの1つです。
Christoph Nakazawaによって設計・開発され、シンプルさと大規模なWebアプリケーションのサポートに重きを置いている。
JavaScriptのパッケージマネージャ(npm)を使って、JestをNode.jsにインストールします。
Jest · 🃏 Delightful JavaScript Testing
はじめ方
1. サンプルプロジェクトの作成
今回は、Reactを使ったWebアプリケーション開発をするつもりで、お馴染みの方はお馴染みのcreate-react-app
コマンドを使ってサクッと初期プロジェクトを作成します。
npx create-react-app . --template typescript
2. 規定のプロファイルを変更
Visual Studio Codeのターミナルで使用するシェルタイプをパソコン側のターミナルと合わせることをおすすめします。今回は、zsh
にしています。
もう少し詳しく話すと、Apple製品のターミナルではzsh
が標準設定ですが、Visual Studo Codeではターミナル単位などで好きなシェルで実行することができ、注意が必要です。特に拡張機能などを経由してターミナル上でコマンドが実行されるような場合は、拡張機能側で指定していない限り規定のプロファイルを使用して実行されるので注意が必要です。
3. 拡張機能をインストール
Visual Studio Codeでアクティビティバー>テスト
の機能を使うためには、次の拡張機能をインストールする必要があります。
プロジェクトディレクトリ直下をデフォルトとして認識されますので、JavaScriptに関連するファイルが存在しない場合は有効になりません。モノレポな構成にしている方は、サブディレクトリを別途設定ファイルで指定する必要があります。
↓🔰拡張機能のインストールが初めての方向け🔰↓
Visual Studio Codeで拡張機能をインストールしてみよう - Speaker Deck
4. テストの実行
拡張機能のインストールが無事に成功している場合は、アクティビティバー>テスト>プライマリーサイドバー
にテストコードが表示されます。
実行方法は、初期設定で自動実行する設定が有効化されているため、アプリコードもしくはテストコードを保存したタイミングで実行されます。
手動で実行する方法は、アクティビティバー>テスト>プライマリーサイドバー
内で▶︎アイコンをクリックすることで実行することができます。他にも、テストコード内でシナリオごとにエディターの行番号が書かれた横あたりに実行ボタンが表示されており、それをクリックすることで実行することもできます。
忙しく実装している時にはついついテストを忘れてしまいがちですが、いざテストコードを実行したときにNGになり、どのタイミングでバグが混入したのかを調べる手間も発生してしまいますが、すぐにフィードバックが得られると早期にバグ修正に繋げることができていいですね。
5. カバレッジの表示
テスト駆動な開発環境が構築できたら、何らかの指標値を元に開発サイクルを回していきたくなると思いますが、その時によく使われる指標の1つにカバレッジ率というものがあります。
基本的にはどのテストツールにもカバレッジまわりのサポートはされていますが、Visual Studio Codeに限った話をすると言語やツールごとにサポートの手厚さにはばらつきがありますので、使用前に相性などを確認してみると良いかもしれません。
有効化するためには、アクティビティバー>テスト>プライマリーサイドバー
内で丸のアイコンの半分が黒色になっているものをクリックします。これがカバレッジレポートを出力するかどうかの設定になります。
再度、テストコードを実行するとカバレッジレポートが出力されます。
出力されたカバレッジレポートは、CI/CDツールに連携することもできますし、手軽にローカル環境で見たい場合には、Live Serverを使うことで実際にHTMLファイルを実行してくれて確認することができます。
coverage>lcov-repot>index.html
をLive Shareで実行することでブラウザ上でこのようにレポートを確認することができます。