JavaScript のテスト
JetBrains Rider を使用すると、Karma(英語)、Vitest(英語)、Jest(英語)、Protractor(英語)、Cucumber.js(英語)、Mocha(英語)、Node.js テストランナー(英語)を使用して JavaScript ユニットテストを実行およびデバッグできます。
テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの隣に表示され、すぐに実行またはデバッグするオプションがあります。
![エディターから単一のテストを実行する Run single test from the editor](https://resources.jetbrains.com/help/img/rider/2024.1/ws_run_test_from_editor.png)
Jest、Karma、Mocha については、JetBrains Rider のコードカバレッジレポートを参照することもできます。
ナビゲーション
JetBrains Rider を使用すると、テストに移動アクション(Ctrl+Shift+T または )を使用して、ソースコードから関連するテストファイルに素早く移動できます。例: auth.js から auth.test.js に移動できます。
テストとスイートの名前、およびこのファイルで定義されているその他のシンボルを表示する構造ビューを使用して、テストファイルをすばやく移動することもできます。
![テストの構造ビュー Structure view for tests](https://resources.jetbrains.com/help/img/rider/2024.1/ws_structure_view_for_tests.png)
構造ツールウィンドウに移動するには、Alt+7 を押します。または、Ctrl+F12 を押して構造ビューをポップアップとしてエディターに開きます。
テストの実行とデバッグ
JavaScript のテストを開始する前に、選択したテストランナーが対応するページに記載されているようにプロジェクトにインストールされて設定されていることを確認してください。
テストのデバッグセッション中に、テストのステップ実行、テストの実行の停止と再開、一時停止時のテストの検査、コンソールでの JavaScript コードスニペットの実行などを行うことができます。
Mocha、Karma、Jest、Vitest を使用して単一のテストを迅速に実行またはデバッグする
テストを実行するには、その隣のガターで
または
をクリックし、リストから実行 <テスト名> を選択します。
テストをデバッグするには、必要に応じてブレークポイントを設定し、テストの横のガターで
または
をクリックし、リストからデバッグ <テスト名> を選択します。
![エディターからテストを実行およびデバッグする Run and debug tests from the editor](https://resources.jetbrains.com/help/img/rider/2024.1/ws_test_run_debug_gutter.png)
実行 / デバッグ構成を作成する
実行 / デバッグ構成ダイアログ ( ) で、
をクリックし、適切な構成タイプを選択します。
デフォルト設定を受け入れるか、必須フィールドにカスタム値を入力します。特定のテストフレームワークについてはヘルプを参照してください。
実行 / デバッグ構成を使用してテストを実行またはデバッグする
テストを実行するには、必要な構成を選択し、構成のリストまたはツールバーで
または
をクリックします。
テストをデバッグするには、必要に応じてブレークポイントを設定し、必要な構成を選択して、構成リストまたはツールバーの
をクリックします。
関連ページ:
![](https://pleiades.io/icons/rider.png)
コードをステップスルーする
中断されたプログラムでは、プログラムの実行を制御できます。プログラムをステップ実行することで、実行ポイントを目的のコードに進め、このポイントでプログラムの状態を調べることができます。コードがデバッグモードで実行されている場合、それを一時停止するには 2 つの方法があります。検査するコード内のブレークポイントの設定で、いずれかがヒットするまで待機します。でプログラムの実行を中断します。デバッガーは、一時停止した瞬間に実行中のステートメントを終了し、次に実行する必要のあるステートメントで停止します。...
![](https://resources.jetbrains.com/help/img/rider/2024.1/debug_frames_pane.png)
中断されたプログラムを調べる
フレームを分析することで、中断されたアプリケーションの状態を調べることができます。コードがデバッグモードで実行されている場合、それを一時停止するには 2 つの方法があります。検査するコード内のブレークポイントの設定で、いずれかがヒットするまで待機します。でプログラムの実行を中断します。デバッガーは、一時停止した瞬間に実行中のステートメントを終了し、次に実行する必要のあるステートメントで停止します。一時停止状態では、現在の実行ポイント(次に実行されるステートメント)は、エディターの左側のガターにあ...
![](https://resources.jetbrains.com/help/img/rider/2024.1/js_interactive_debugger_console_filter.png)
対話型デバッガーコンソール
対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、を使用)。コンソールペインも read-eval-print ループ(REPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、JetBrains Rider は完成のための異形を提案します。該当する明細を選択してを...
![](https://resources.jetbrains.com/help/img/rider/2024.1/breakpoint_condition_example.png)
ブレークポイント
ブレークポイントを使用すると、特定のステートメントでプログラムの実行を一時停止し、変数値、コールスタック、その他のプログラムパラメーターを分析したり、式を評価したり、プログラムをステップ実行したりできます。JetBrains Rider では、次の型のブレークポイントを操作できます。行ブレークポイント、コード内の特定の文に設定できます。実行がこの行に達すると、デバッガーはプログラムの実行を中断します。行ブレークポイントは実行可能な行にのみ設定できます。コメント、宣言、空行は、行ブレークポイントの...
![](https://resources.jetbrains.com/help/img/rider/2024.1/ws_js_refactoring_rename_file_intention_custom_naming_convention.png)
JavaScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング:ファイルやフォルダーを移動するだけでなく、JetBrains Rider では JavaScript のトップレベルのシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュール内のクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押...
![](https://resources.jetbrains.com/help/img/rider/2024.1/ws_cucumber_generate_step_definition_choose_language_version.png)
Cucumber.js
Cucumber.js は、動作駆動型 JavaScript 開発用のテストフレームワークです。Cucumber.js テストは、人間が読める Gherkin 言語で記述されており、拡張子 feature を持つ機能ファイルに保存されます。JetBrains Rider は Cucumber.js と統合し、Gherkin で記述された機能を認識するため、IDE から直接 Cucumber.js テストを実行できます。始める前に:Cucumber.js バージョン 6.0.0+ を使用するには、JetB...