テスト

Stencil内のテストは、単体テストとエンドツーエンド（e2e）テストの2つの異なるタイプに分けられます。 どちらのタイプも、JavaScriptテストソリューションとしてJestを使用します。 エンドツーエンドテスト用のブラウザ環境は、Puppeteerを使用して実行されます。これにより、Stencilがビルドに組み込み始めることができる多くの利点が提供されます。

ユニットテストとエンドツーエンドテスト

テストをどのように行うべきか、そして単体テスト、エンドツーエンドテスト、さらには統合テストと見なすべきものについては、無数の哲学があります。すべてを単純化するために、ステンシルはそれを分解して、開発者が各タイプのテストをいつ使用するかについて定義された説明を持っているようにします。

単体テストは、コンポーネントのメソッドを分離してテストすることに重点を置いています。たとえば、メソッドに引数 Xを指定すると、Yが返されます。

エンドツーエンドのテストは、コンポーネントがDOMでどのようにレンダリングされるか、および個々のコンポーネントがどのように連携するかに焦点を当てています。たとえば、 my-componentにX属性がある場合、子コンポーネントはテキスト Yをレンダリングし、イベントZを受け取ることを期待します。エンドツーエンドのテストでは、ノード環境の代わりにPuppeteerを使用します。これにより、より現実的な結果を提供するために、実際のブラウザー内でエンドツーエンドのテストを実行できます。

JavaScriptテストとDOMテストの境界線を曖昧にしないことで、大規模なチーム間でテストをすばやく構築できます。

テストコマンド

以下は、アプリの package.jsonファイルに追加できるnpmスクリプトの例です。 コマンドが stencil testであり、単体テストの場合は--spec、エンドツーエンドテストの場合は --e2eのオプションのフラグがあることに注意してください。

"scripts": {
  "test": "stencil test --spec",
  "test.watch": "stencil test --spec --watch",
  "test.e2e": "stencil test --e2e"
}

この構成はすべて、Stencil AppStarterとStencilComponent Starterに含まれているため、これらのテンプレートの1つを使用してプロジェクトを開始する場合は、何も追加する必要はありません。 この情報は、主に情報提供を目的としてここに表示されます。

構成のテスト

ステンシルは、すでに収集したデータからデフォルトを適用します。 たとえば、ステンシルは、どのディレクトリを調べるか、どのファイルがspecファイルおよびe2eファイルであるかをすでに認識しています。 Jestは、同じ構成名を使用して構成できますが、ステンシル構成の testingプロパティを使用するようになりました。 詳細については、テスト構成ドキュメントを参照してください。

import { Config } from '@stencil/core';

export const config: Config = {
  testing: {
    testPathIgnorePatterns: [...]
  }
};

VSCodeでのテストの実行とデバッグ

次の構成を .vscode/launch.jsonに追加すると、VS Code Debuggerを使用して、エディターで現在アクティブなファイルのステンシルテストランナーを実行できます。 実行するテストファイルが表示されていることを確認してから、デバッグ構成をそれぞれ選択し（スペックテストかe2eテストかに応じて）、再生ボタンを押します。

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "E2E Test Current File",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/node_modules/.bin/stencil",
      "args": ["test", "--e2e", "${relativeFile}"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Spec Test Current File",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/node_modules/.bin/stencil",
      "args": ["test", "--spec", "${relativeFile}"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true
    }
  ]
}

その他の資料

• StencilJSでのユニットテストの基本