IntelliJ IDEA 2024.1 ヘルプ

Cucumber.js

Cucumber.js(英語) は、動作駆動型 JavaScript 開発用のテストフレームワークです。Cucumber.js テストは、人間が読める Gherkin(英語) 言語で記述されており、拡張子 feature を持つ機能(英語)ファイルに保存されます。IntelliJ IDEA は Cucumber.js と統合し、Gherkin で記述された機能を認識するため、IDE から直接 Cucumber.js テストを実行できます。

始める前に

  1. Cucumber.js バージョン 6.0.0+ を使用するには、IntelliJ IDEA 2020.3.1 以降を使用していることを確認してください。

  2. Node.js をダウンロードしてインストールします。

  3. 設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および Gherkin に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

  4. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Cucumber.js プラグインをインストールして有効にします。

Cucumber.js をインストールする

  • 埋め込まれたターミナルAlt+F12)で、次のいずれかのコマンドを入力します。

    • npm install cucumber をプロジェクトにローカルインストールします。

    • グローバルインストール用の npm install -g cucumber

    • npm install --save-dev cucumber は、Cucumber.js を開発依存関係(英語)としてインストールします。

    Cucumber.js 公式サイトの Cucumber.js デモ(英語)も参照してください。

テスト定義の作成

IntelliJ IDEA では、JavaScript と TypeScript の両方でステップ定義を書くことができます。IntelliJ IDEA は定義が欠落しているステップを検出してハイライトし、生成するためのクイックフィックスを提案します。

  1. 定義なしのステップにキャレットを置き、Alt+Enter を押して、ステップ定義の作成またはすべてのステップ定義の作成を選択します。

    Create Cucumber.js step definitions: quick-fix

    または、ステップの上にマウスを移動し、ポップアップ内のリンクを使用します。

    Creating Cucumber.js step definitions: invoke actions from the pop-up
  2. 表示されたダイアログで、新しいファイルの名前と定義を書き込む言語を指定します。

    Creating Cucumber.js step definitions: choose language version

    そのようなファイルがすでに存在する場合は、IntelliJ IDEA はポップアップを表示して、そこに定義を追加するファイルを選択するか、新しいファイルを作成することを選択する必要があります。

    Creating Cucumber.js step definitions: select target file

テストの実行

Cucumber.js テストは、実行 / デバッグ構成によってのみ起動されます。

Cucumber.js 実行構成を作成する

  1. 実行 / デバッグ構成ダイアログ (メインメニューの実行 | 実行構成の編集 ) を開き、左側のペインで the Add button をクリックし、リストから Cucumber.js を選択します。「実行 / デバッグ構成: Cucumber.js」ダイアログが開きます。

  2. 機能ファイルまたはディレクトリフィールドで、実行するテストを指定します。多数の機能を実行する場合は、特定の .feature ファイルまたはフォルダーへのパスを入力します。

  3. 使用する Node.js インタープリターを指定します。

    プロジェクトエイリアスを選択すると、IntelliJ IDEA は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、the Browse button をクリックして新しいインタープリターを構成することもできます。

  4. Cucumber パッケージフィールドで、cucumber パッケージが格納されているフォルダーへのパスを指定します。

  5. アプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。

  6. オプション:

    • 名前フィルター」フィールドに、フィーチャーファイルまたはディレクトリからのすべてのシナリオの代わりに実行する特定のシナリオの名前を入力します。

    • 実行可能ファイルに渡すコマンドライン引数 ( -r --require LIBRARY|DIR-t --tags TAG_EXPRESSION--coffee など) を指定します。詳細については、cucumber-js --help コマンドを通じて利用できるネイティブの組み込みヘルプを参照してください。

    • 環境変数フィールドで、アプリケーションの環境変数を指定します。

実行構成を介してテストを実行する

  1. 構成のリストから Cucumber.js 実行 / デバッグ構成を選択し、リストまたはツールバーの the Run icon をクリックします。

  2. 実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。

テストファイルからテストを実行する

  • 単一のテストを実行するには、エディターでテストファイルを開き、実行するシナリオにキャレットを置き、コンテキストメニューからシナリオ実行: <シナリオ名>を選択します。

  • 単一のテストファイルからすべてのテストを実行するには、エディターでテストファイルを開くか、プロジェクトツールウィンドウでテストファイルを選択し、コンテキストメニューから <テストファイル名> を実行しますを選択します。

どちらの場合でも、IntelliJ IDEA は実行 / デバッグ構成を作成し、後で保存して使用することができます。

デバッグテスト

実行構成によるテストのデバッグ

  1. 構成のリストから Cucumber.js 実行 / デバッグ構成を選択し、リストまたはツールバーの the Debug icon をクリックします。

  2. 実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。

テストファイルからテストをデバッグする

  • 単一のテストをデバッグするには、必要に応じてブレークポイントを設定し、デバッグするシナリオにキャレットを置き、コンテキストメニューからデバッグシナリオ: <シナリオ名>を選択します。

  • 単一のテストファイルからすべてのテストをデバッグするには、エディターでテストファイルを開くか、プロジェクトツールウィンドウでテストファイルを選択し、コンテキストメニューからデバッグ <テストファイル名> を選択します。

どちらの場合でも、IntelliJ IDEA は実行 / デバッグ構成を作成し、後で保存して使用することができます。

TypeScript で書かれたテストの実行とデバッグ

  1. 上記のようCucumber.js 実行 / デバッグ構成を作成します。

  2. 起動前領域で、the Add button をクリックし、一覧から TypeScript のコンパイルを選択して、使用する tsconfig.json ファイルを指定します。IntelliJ IDEA は、Cucumber.js を実行する前に、この tsconfig.json を使って TypeScript コンパイラーを実行します。

    Cucumber.js Run configuration: adding a Compile TypeScript Before launch task
  3. TypeScript で書かれたテストをデバッグするには、tsconfig.json を開き、"sourceMap": true を設定してソースマップを有効にします。

IntelliJ IDEA を使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストに移動できます。

  • テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューからジャンプ | テストまたはジャンプ | テスト対象を選択するか、Ctrl+Shift+T を押します。

  • .feature ファイルのステップからステップ定義に移動するには、Ctrl を押したまま、ステップにカーソルを合わせ、リンクになったときにステップをクリックします。

    Cucumber.js: Navigate from a step to its definition
  • テスト結果からテスト定義に移動するには、「テストランナー」タブでテスト名を 2 回クリックするか、コンテキストメニューから「ソースに移動」を選択するか、単に F4 を押します。テストファイルがエディターで開き、テスト定義にキャレットが置かれます。

構文ハイライトを構成する

好みや習慣に応じて、Cucumber.js 対応の構文ハイライトを設定できます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | カラースキームの切り替え | Cucumber に移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

関連ページ:

プラグインのインストール

プラグインは IntelliJ IDEA のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...

実行 / デバッグ構成ダイアログ

このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名...

テスト結果を調べる

IntelliJ IDEA でテストが実行されている間、テスト実行は実行ツールウィンドウのその実行構成のタブに表示されます。テスト実行が終了すると、そのタブでテスト結果を確認できます。右側のコンソールには、現在のテストセッションの出力が表示されます。テスト実行に関する詳細情報や、テストが失敗した理由や無視された理由を確認できます。コンソール出力をファイルに保存することもできます。テスト結果リストの上にあるテスト結果ツールバーを使用すると、成功したテストと無視されたテストの表示と非表示を切り替えた...

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類:Intell

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。IntelliJ IDEA では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択する...

JavaScript のテスト

IntelliJ IDEA を使用すると、Karma、Vitest、Jest、Protractor、Cucumber.js、Mocha、Node.js テストランナーを使用して JavaScript ユニットテストを実行およびデバッグできます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの隣に表示され、すぐに実行またはデバッグするオプションがあります。Jest、Karma、Mocha については、IntelliJ IDEA...