テストのセットアップは非常に困難な場合があります。特に、始めたばかりの場合はなおさらです。私が Vue と Nuxt を使い始めたとき、リンティングやテスト用の構成のセットアップに関する経験はまったくありませんでした。vue-cli は、ユニットおよびスナップショット テスト用の Jest セットアップを含む、いくつかの種類の事前作成された構成を提供しますが、Nuxt は現時点で vue-cli に似たものを提供していません。私はその動作を模倣したかったのですが、明確で何よりも簡単に実行できる手順を概説する優れたリソースを見つけることができませんでした。この記事は、Nuxt + Jest を使用したい人のためのリファレンス ガイドです。

ところで、もう少し複雑なことをするときはいつでも、すべてのステップを書き留めます。新しいプロジェクトでそれを再現するのがはるかに簡単になるからです。これらの手順を完全に文書化する必要はありません (ただし、最終的には機能する必要があります)。使用した各コマンドを書き留めるだけです。これにより、このような記事を書くのがはるかに簡単になり、それらを公開することで誰もが利益を得ることができます.

ここで説明されているような構成を具体的に探していた場合は、おそらくテストの利点について既にご存じでしょう。テストは適切な CI/CD を可能にします。率直に言って、これはソフトウェア エンジニアリングで最もクールなことの 1 つです (何もテストしたくない人から来ました)。ただし、そうでない場合は、テストがあなたとあなたのプロジェクトにどのように役立つかについてもっと調べることを強くお勧めします.

最後に 1 つ: 特定のもの (リンティングなど) をセットアップしようとしているときは本当に好きではありませんが、見つけたチュートリアルは機能しません。この設定で何かがうまくいかない場合はお知らせください。誰の時間も無駄にしたくありません。

1.依存関係のインストール

開発依存関係をインストールするには、プロジェクトのルート ディレクトリ内で次のコマンドを発行します。

npm install @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0 @vue/test-utils jest babel-jest jest-serializer-vue vue-jest -D

2.ジェスト設定

ルート フォルダーに作成jest.config.jsし、次のコンテンツを追加します。

Jest 自体は Vue の単一ファイル コンポーネントを理解しないためvue-jest、プリプロセッサとして使用するように指示します。さらに、Node の最新バージョンはすでにほとんどの ES2015 機能をサポートしていますが、ES モジュールの構文とステージ x 機能を で処理されるテストで引き続き使用したい場合がありますbabel-jest。

3.バベルの設定

単一ファイル コンポーネントのテストに関する Vue ドキュメントに記載されているとおり:

webpack はすでに ES モジュールの処理方法を知っているため、デフォルトの Babel 構成では ES モジュールの変換が無効になっています。ただし、Jest テストは Node.js で直接実行されるため、テスト用に有効にする必要があります。

[2019 年 11 月更新]: babel.config.js は、babel のバージョン 7 を利用するように変更されました。

したがってbabel.config.js、次の内容で呼び出されるファイルを作成します。

4. package.json にテスト スクリプトを追加します。

あとは、以下に示すようにテスト スクリプトを追加するだけpackage.jsonです。この場合、この行は、コマンド ラインで"test": "jest"発行するときに Jest テスト スイートを実行するようにプロジェクトに指示します。npm run test

5. テストを書く

もちろん、この記事の要点は Vue コンポーネントをテストできるようにすることなので、ここではそれを行います。例として、Nuxt が を使用するときに生成するデフォルトの Logo コンポーネントを使用しますnpx create-nuxt-app。

Jest は、コンポーネントのテストが__tests__(2 つのアンダースコアに注意してください) という名前のフォルダーにあることを想定しています。慣例として、__tests__ フォルダは常にコンポーネントの同じディレクトリにあります。たとえば、次のようなフォルダー構造がある場合:components/Logo.vueの場合、ロゴ コンポーネントのテストは にありcomponents/__tests__/Logo.spec.jsます。

以下に示すテストは実際には不完全であり、コンポーネントが正しくマウントされてレンダリングされるかどうかのみを確認するだけであることに注意してください。ただし、開始するには十分です。

6. テストの実行

でテストを実行しますnpm run test。次のように出力されます。

vue-cli を使用した実験的なセットアップ

vue-cli単一のコマンドで簡単にインストールできるすべてのプラグインと構成について聞いたことがあるでしょう。Nuxt との互換性については言及されていませんが、Jest をセットアップするために、この特定の状況で実際に使用できます。

テストをまだセットアップしていない新しいプロジェクトで次のコマンドを実行するだけです。

vue add @vue/unit-jest

“test:unit”: “vue-cli-service test:unit”

"test": "jest"

ここでの最後の注意: 動作しますが、将来的に Nuxt との互換性が維持されるかどうかわからないため、本番環境で使用するかどうかはわかりません。

Git リポジトリ

この構成の動作を確認したい場合は、複製できる小さな git リポジトリをセットアップしました。masterブランチには手動セットアップが含まれており、ブランチvue-cliには実験的な構成が含まれています。

ソース