セットアップ

Marko Testing Libraryは、どのテストランナーにも依存していません。ただし、テスト環境には依存しています。このパッケージは、サーバーサイドとクライアントサイドの両方のMarkoテンプレートのテストに使用でき、それぞれに最適化された実装を提供します。これは、Markoと同様に、ブラウザシムを使用して行われます。

ブラウザシムは、すべてのバンドラーといくつかのテストランナーを含む、多くのツールによって認識されます。

以下は、一般的なテストランナーを使用してサーバーとブラウザの両方のコンポーネントをテストするための設定例です。

Jest

JestがMarkoテンプレートを理解するには、まず@marko/jestプリセットをインストールする必要があります。これにより、Markoテンプレートをテストにインポートできます。

Jestには、ブラウザオプションがあり、Jestに上記のようにすべてのモジュールのブラウザシムバージョンを解決するように指示します。

クライアントサイドでレンダリングされたコンポーネントをテストするには、browserオプションとプリセットの両方を有効にするだけで準備完了です。

jest.config.js
module.exports = {
  preset: '@marko/jest/preset/browser',
}

サーバーサイドでレンダリングされたコンポーネントをテストするには、代わりにjestプリセットとして@marko/jest/preset/nodeを使用できます。

jest.config.js
module.exports = {
  preset: '@marko/jest/preset/node',
}

Jest設定には、複数のプロジェクトを含めることもでき、これを使用して、サーバーサイドテストとクライアントサイドテストの組み合わせ設定を作成できます。

jest.config.js
module.exports = {
  projects: [
    {
      displayName: 'server',
      preset: '@marko/jest/preset/node',
      testRegex: '/__tests__/[^.]+\\.server\\.js$',
    },
    {
      displayName: 'browser',
      preset: '@marko/jest/preset/browser',
      testRegex: '/__tests__/[^.]+\\.browser\\.js$',
    },
  ],
}

Mocha

MochaもMarkoコンポーネントのテストに最適です。ただし、Mochaはブラウザシムを理解していないため、そのままではサーバーサイドのMarkoコンポーネントでのみ機能します。

mochaでサーバーサイドのMarkoテストを実行するには、次のコマンドを実行するだけです。

mocha --require marko/node-require

これは、Marko requireフックを有効にし、サーバーサイドのMarkoテンプレートをテストで直接requireできるようにします。

Mochaを使用したコンポーネントのクライアントサイドテストでは、多くの場合、バンドラーを使用してテストをビルドし（上記のようにブラウザシムを適切に解決します）、何らかのブラウザコンテキストでこれらのテストを読み込みます。

Jest​

Mocha​

Jest

Mocha