とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

DevOpsに関連する技術情報を幅広く提供していきます。

日本仮想化技術がお届けする「とことんDevOps」では、DevOpsに関する技術情報や、日々のDevOps業務の中での検証結果、TipsなどDevOpsのお役立ち情報をお届けします。
主なテーマ: DevOps、CI/CD、コンテナ開発、IaCなど
読者登録と各種SNSのフォローもよろしくお願いいたします。

Visual Studio CodeでJestを使ったテスト自動化を始めてみよう

最近はフロントエンドまわりの開発をあれこれやっている中で、テスト駆動な開発をしたいのでVisual Studio Codeでテスト環境を整えていきたいと思います。

はじめに

今回は、コンテナ内で開発方法は使用せずに進めていきますので、ホスト側にお好きな方法でNode.jsの実行環境を構築してください。anyenvasdfを使用した環境構築はおすすめです。

↓🔰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に関連するファイルが存在しない場合は有効になりません。モノレポな構成にしている方は、サブディレクトリを別途設定ファイルで指定する必要があります。

marketplace.visualstudio.com

↓🔰拡張機能のインストールが初めての方向け🔰↓
Visual Studio Codeで拡張機能をインストールしてみよう - Speaker Deck

4. テストの実行

拡張機能のインストールが無事に成功している場合は、アクティビティバー>テスト>プライマリーサイドバーにテストコードが表示されます。

実行方法は、初期設定で自動実行する設定が有効化されているため、アプリコードもしくはテストコードを保存したタイミングで実行されます。

手動で実行する方法は、アクティビティバー>テスト>プライマリーサイドバー内で▶︎アイコンをクリックすることで実行することができます。他にも、テストコード内でシナリオごとにエディターの行番号が書かれた横あたりに実行ボタンが表示されており、それをクリックすることで実行することもできます。

忙しく実装している時にはついついテストを忘れてしまいがちですが、いざテストコードを実行したときにNGになり、どのタイミングでバグが混入したのかを調べる手間も発生してしまいますが、すぐにフィードバックが得られると早期にバグ修正に繋げることができていいですね。

5. カバレッジの表示

テスト駆動な開発環境が構築できたら、何らかの指標値を元に開発サイクルを回していきたくなると思いますが、その時によく使われる指標の1つにカバレッジ率というものがあります。

基本的にはどのテストツールにもカバレッジまわりのサポートはされていますが、Visual Studio Codeに限った話をすると言語やツールごとにサポートの手厚さにはばらつきがありますので、使用前に相性などを確認してみると良いかもしれません。

有効化するためには、アクティビティバー>テスト>プライマリーサイドバー内で丸のアイコンの半分が黒色になっているものをクリックします。これがカバレッジレポートを出力するかどうかの設定になります。

再度、テストコードを実行するとカバレッジレポートが出力されます。

出力されたカバレッジレポートは、CI/CDツールに連携することもできますし、手軽にローカル環境で見たい場合には、Live Serverを使うことで実際にHTMLファイルを実行してくれて確認することができます。

marketplace.visualstudio.com

coverage>lcov-repot>index.htmlをLive Shareで実行することでブラウザ上でこのようにレポートを確認することができます。