VS Code の Jest 拡張機能の使い方

Jest を使用してテストを行う際、 必ず通るとわかっているテストを毎回実行していては、作業効率があまりよろしくありません。 とはいえ、実行するテストをコマンドで1つずつ手入力していくのもメンドウです。 そこで、VS Code に「Jest」拡張機能をインストールすると、 実行するテストを簡単に指定することができるようになります。

Jest 拡張機能のインストール

さっそくですがインストールしていきましょう。

VS Code に「Jest」拡張機能をインストールするには、 拡張機能の検索欄に「jest」と入力して検索しインストールします。

install.png

Jest のコマンドを変更する

この拡張機能で使用される Jest のコマンドを変更する必要がある場合は、拡張機能の設定画面を開き、「Jest Command Line」の項目を変更します。 Jest で ES Modules を使用している場合は、Node.js に --experimental-vm-modules オプションを付けた状態で Jest を実行する必要があります。

commandline.png

テストエクスプローラー

VS Code に「テストエクスプローラー」ビューが追加されます。 このテストエクスプローラーを使用すると、Jest で定義しているテストのファイル名やテスト名の一覧が自動で表示されます。 そこからそのテストを実行したり、そのテストが定義されているファイルを開いたりすることができます。 テストエクスプローラーを使用するには、VS Code のアクティビティバー(左端の縦のバー)の「Testing」のアイコンをクリックします。

テストエクスプローラーからテストを実行するには、ファイル名やテスト名の右に表示されている「Run Test」アイコンをクリックします。 そのテストが定義されているファイルを表示したい場合は「Go to Test」アイコンをクリックします。

テストエクスプローラーの上部には検索ボックスがありますので、そこからテストを検索することもできます。 また、ファイル名やテスト名の左側に、テストの実行結果がアイコンで見やすく表示されますので、 どのテストが失敗しているのか探す際も一目瞭然です。 テストの実行結果のアイコンは、テストエクスプローラーの右上のメニューの「Clear All Results」を選択するとクリアすることができます。

explorer.png

テスト結果パネル

テストの実行結果は「TEST RESULT」パネルに表示されます。 パネルの右側にはテストの実行履歴も表示され、そこから再度実行させることもできます。

testresult.png

開いているファイルから実行する

テストを定義しているファイルを開くと、そこから直接テストを実行することもできるようになります。

行番号のバーから実行する

行番号の左側にアイコンが表示されるようになります。 それをクリックすると、その位置に定義されているテストを直接実行できます。

linebar.png

コンテキストメニューから実行する

開いているファイルの右クリックのメニューからもテストを実行することができるようになります。 「Run Test at Cursor」を選択すると、カーソルの位置に定義されているテストを実行できます。 「Run Tests in Current File」を選択すると、そのファイルに定義されている全てのテストを実行できます。

contextmenu.png

コマンドパレットから実行する

コマンドパレットに Jest を操作するコマンドが増えていますので確認してみましょう。 コマンドパレットを使用するには、Ctrl + Shift + P を使用します。 コマンドパレットで「>jest」と入力すると、追加されたコマンドを検索できます。

palette.png

自動実行のタイミングを変更する

この拡張機能をインストールすると、デフォルトで Jest が --watch で起動した状態になります。 VS Code 起動時に毎回全てのテストが実行されるようになりますし、ファイルを修正するたびにテストが実行されてしまいます。 自動実行のタイミングを変更したい場合は、拡張機能の設定画面を開き、「Auto Run」の項目から「settings.json」を変更します。

autorun.png

自動実行を全て無効化する

自動実行を全て無効化するには、「settings.json」を下記のように変更します。

settings.json
{
	"jest.autoRun": {
		"watch": false
	}
}

テストファイル保存時のみ自動実行する

テストファイルが保存された時のみ自動実行するには、「settings.json」を下記のように変更します。 ソースファイルが保存された時には自動実行されません。

settings.json
{
	"jest.autoRun": {
		"watch": false,
		"onSave": "test-file"
	}
}

テストファイルとソースファイル保存時のみ自動実行する

テストファイルとソースファイルのどちらかが保存された時のみ自動実行するには、 「settings.json」を下記のように変更します。

settings.json
{
	"jest.autoRun": {
		"watch": false,
		"onSave": "test-src-file"
	}
}

参考サイト

関連記事

近年の Web 開発では、サーバーサイド(PHP など)ではなく、クライアントサイド(JavaScript)で処理することが多くなりました。JavaScript の重要性が増えるに伴って、そのテストもまた重要になってきます。Jest とは?Jest は、Meta 社(旧:Facebook 社)製の JavaScript ...
PHPUnit を使用してテストを行う際、必ず通るとわかっているテストを毎回実行していては、作業効率があまりよろしくありません。とはいえ、実行するテストをコマンドで1つずつ手入力していくのもメンドウです。そこで、VS Code に「PHPUnit Test Explorer」拡張機能をインストールすると、実行するテスト ...
デフォルトの VS Code には、キーボードマクロ(キーマクロ)というキー操作を記録して再生するという機能がありません。秀丸エディタやサクラエディタなどで、キーボードマクロを多用していた方はかなり困るのではないでしょうか。そこで、VS Code でもキーボードマクロが使用できるようにしてみましょう。VS Code に ...
あまり頻度は多くありませんが、ファイルの内容をテキストではなくバイナリで確認したいときがあります。VS Code に「Hex Editor」拡張機能をインストールすると、VS Code 上でファイルの内容をバイナリで確認したり、直接バイナリで編集したりすることができるようになります。「Hex Editor」拡張機能のイ ...
デフォルトの VS Code の場合、PHP ファイルの関数一覧は表示されません。PHP ファイルが縦に長い場合は、関数一覧が無いと不便だと思いますので、VS Code で PHP の関数一覧が表示されるように設定してみましょう。アウトラインビューを使用するVS Code には変数や関数の一覧を表示するためのアウトライ ...
VS Code に Docker 拡張機能をインストールすると、Dockerfile もしくは docker-compose.yml ファイルを編集する際にコード補完機能が使用できるようになったり、VS Code から Docker のコンテナやイメージを操作できるようになります。Docker 拡張機能のインストールさ ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

  • 2023/10/01 NEW
    ツール「ダミー画像ジェネレーター」の「文字設定」の「エフェクト」に「塗りつぶし」 を追加しました。
    文字が見にくい場合に見やすくすることができます。
  • 2023/10/01 NEW
    ツール「テキスト画像ジェネレーター」の公開を終了しました。
    お問い合わせ等がありましたらこちらよりお願いいたします。
  • 2023/09/24 NEW
    ツール「caseスタイル変換ツール」の「変換結果」に「SNAKE_CASE」、「KEBAB-CASE」 を追加しました。
    大文字のスネークケースとケバブケースに変換できます。
  • 2023/09/16
    ツール「caseスタイル変換ツール」で「camelCase / PascalCase」 から 「snake_case」、「kebab-case」 への変換の際に、
    より自然な形式に変換されるように修正しました。
    不具合やバグを発見した場合は、連絡をいただけると助かります。
  • 2023/08/28
    ブログ記事「Microsoft Edge のページの角の丸みを元に戻す方法」を追加しました。

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、Twitter もしくは、お問い合わせより、お願いします。

  • フィードバックの送信が完了しました。

Ads