インストール

モジュールをインストールします 

  1. npm install @wordpress/e2e-tests --save-dev

テストの実行

Gutenbergリポジトリで利用可能なコマンドは次のとおりです: 

  1. {
  2.    "test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
  3.    "test:e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
  4.    "test:e2e:watch": "npm run test:e2e -- --watch"
  5. }

利用可能なすべてのテストを実行

  1. npm run test:e2e

利用可能なすべてのテストを実行し、変更を監視します。

  1. npm run test:e2e:watch

特定のテストファイルを実行

  1. npm run test:e2e -- packages/e2e-test/
  2. <path_to_test_file>
  5. # また、変更を監視するには:
  7. npm run test:e2e:watch -- packages/e2e-test/
  8. <path_to_test_file>

デバッグ

e2eテストをChromeブラウザでデバッグ可能にします。 

  1. npm run test:e2e:debug

コマンドを実行した後、テストはchrome://inspect/#devicesに移動し、inspectをクリックすることでChromeでデバッグ可能になります。/test-e2e.jsへのパスの下にあります。

vscodeでのデバッグ

Chromeブラウザでのデバッグは、.vscode/launch.jsonに次の設定を追加することでvscodeのデバッガーに置き換えることができます: 

  1. {
  2.    "type": "node",
  3.    "request": "launch",
  4.    "name": "Debug current e2e test",
  5.    "program": "${workspaceFolder}/node_modules/@wordpress/scripts/bin/wp-scripts.js",
  6.    "args": [
  7.    "test-e2e",
  8.    "--config=${workspaceFolder}/packages/e2e-tests/jest.config.js",
  9.    "--verbose=true",
  10.    "--runInBand",
  11.    "--watch",
  12.    "${file}"
  13.    ],
  14.    "console": "integratedTerminal",
  15.    "internalConsoleOptions": "neverOpen",
  16.    "trace": "all"
  17. }

これにより、エディタで現在開いているspecファイルをターゲットにしてjestが実行されます。vscodeのデバッガーを使用して、Chrome DevToolsのようにブレークポイントを追加し、テストを検査できます。

注意: このパッケージは、長期サポートステータスのNode.jsバージョンを必要とします（アクティブLTSまたはメンテナンスLTSリリースを確認）。古いバージョンとは互換性がありません。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。