IntelliJ IDEA 2020.3 ヘルプ

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. JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページで Cucumber.js プラグインをインストールして有効にします。

  4. 設定 / 環境設定 | プラグインページで Gherkin バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

Cucumber.js のインストール

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

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

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

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

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

npm、pnpm、Yarn に従って、cucumber パッケージを Node.js と NPM ページにインストールすることもできます。

テスト定義の作成

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 インタープリターを指定してください。これはローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。

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

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

  6. オプション:

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

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

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

  1. メインツールバーのリストから Cucumber.js の実行 / デバッグ構成を選択し、リストの右側にある the Run icon をクリックします。

  2. テストサーバーは自動的に起動します。実行ツールウィンドウで、テストサーバーからのメッセージを表示および分析します。

  3. 実行ツールウィンドウのテストランナータブのテスト実行の監視

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

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

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

どちらの場合でも、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 回クリックするか、コンテキストメニューからソースに移動を選択します。エディターでテストファイルが開き、カーソルがテスト定義に置かれます。

構文ハイライトの構成

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

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

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

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

npm、pnpm、Yarn

IntelliJ IDEA は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。IntelliJ IDEA では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。IntelliJ IDEA は、package.jso...

Node.js および NPM

このページは、プラグインの管理に従って、設定 / 環境設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。Node.js の操作方法については、Node.js アプリケーションの開発セクションを参照してください。次の Node.js バージョンが IntelliJ IDEA 2020.3 でサポートされています。Node.js 10、Node.js 12、Node.js 14、Node.js 15、サポートされている Node...

Node.js

Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。IntelliJ IDEA は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.j...

色とフォントの構成

開発者として、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストのフォーマットに使用され、一目で理解しやすくなります。IntelliJ IDEA は、好適な色とフォントを定義するカラースキームを使用しています。配色は、ウィンドウ、ダイアログ、コントロールの外観を定義するインターフェーステーマとは異なります。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキーム...

Jest

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