JetBrains Rider 2024.1 ヘルプ

Cucumber.js

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

始める前に

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

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

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

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

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

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

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

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

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

テスト定義の作成

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

  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

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

    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 インタープリターを指定します。

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

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、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. 実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。

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

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

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

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

デバッグテスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連ページ:

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

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

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

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

ブレークポイント

ブレークポイントを使用すると、特定のステートメントでプログラムの実行を一時停止し、変数値、コールスタック、その他のプログラムパラメーターを分析したり、式を評価したり、プログラムをステップ実行したりできます。JetBrains Rider では、次の型のブレークポイントを操作できます。行ブレークポイント、コード内の特定の文に設定できます。実行がこの行に達すると、デバッガーはプログラムの実行を中断します。行ブレークポイントは実行可能な行にのみ設定できます。コメント、宣言、空行は、行ブレークポイントの...

配色: IDE テキストのフォントと色

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

JavaScript のテスト

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

Jest

Jest は、特にクライアント側の JavaScript アプリケーションおよび React アプリケーション用のテストプラットフォームです。プラットフォームの詳細については、Jest の公式 Web サイトを参照してください。JetBrains Rider の Jest でテストを実行し、デバッグすることができます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターでテストの横に表示され、すぐに実行したりデバッグすることができます。始める前に...