ブラウザベースのアプリケーション用の堅(jiān)牢な自動(dòng)テストランナーであるCypressは、コンポーネントテストをサポートするようになりました。この記事では、サイプレスコンポーネントのテストを大規(guī)模なVUEアプリケーションに統(tǒng)合し、ベストプラクティスを強(qiáng)調(diào)し、一般的な課題に対処することを検討します。私たちのチームは、以前はJestおよびVueテストのUtilsを使用していましたが、ブラウザベースのテスト環(huán)境と既存のエンドツーエンドテストとのシームレスな統(tǒng)合のためにサイプレスに移行しました。

注：この記事は、サイプレス8の機(jī)能を反映しています。將來(lái)の更新の潛在的な変更を期待してください。

コンポーネントテスト構(gòu)造：実用的な例

タイトル、ボディ、および確認(rèn)ボタンを備えた「プライバシーポリシー」コンポーネントを検討してください。ボタンをクリックすると、「確認(rèn)」イベントが発生します。サイプレスコンポーネントテストは次のようになる場(chǎng)合があります：

 '@cypress/vue'から{mount}をインポートします。
'./privacypolicynotice.vue'からprivacypolicynoticeをインポートします。

説明（ 'privacypolicynotice'、（）=> {
  それ（ 'タイトルをレンダリングする'、（）=> {
    マウント（privacypolicynotice）;
    cy.contains（ 'h1'、 'プライバシーポリシー'）。
  }）;

  それ（ 'ボタンクリックで「確認(rèn)」イベントを発します'、（）=> {
    マウント（privacypolicynotice）;
    cy.contains（ 'button'、 '/^ok/'）
      。クリック（）
      .vue（）
      .then（（wrapper）=> {
        expect（wrapper.emitted（ 'cunsile'））。to.have.length（1）;
      }）;
  }）;
}）;

このテストは、ユーザーインターフェイス（UI）要素と開(kāi)発者インターフェイス（API）イベントの両方を検証し、コンポーネントの構(gòu)造とアクセシビリティを暗黙的にテストします。たとえば、ボタンをDivのボタンを交換すると、すぐにアクセシビリティの問(wèn)題が強(qiáng)調(diào)されます。

テスト戦略：層狀アプローチ

私たちのテスト戦略は、次のことを區(qū)別します。

• ユニットテスト：個(gè)々の関數(shù)動(dòng)作を確認(rèn)します。
• コンポーネントテスト： UIコンポーネントを分離し、ユーザーと開(kāi)発者の対話を確認(rèn)します。
• エンドツーエンドのテスト：ユーザーの観點(diǎn)からアプリケーション全體の機(jī)能をテストします。
• 統(tǒng)合テスト：複數(shù)のアプリケーションパーツ（より広いカテゴリ）の相互作用をテストします。

特に、コンポーネントテストは、予想されるイベント（開(kāi)発者契約）およびUI狀態(tài)反射（ユーザー契約）の確認(rèn)に焦點(diǎn)を當(dāng)てています。また、貴重なコンポーネントドキュメントとしても機(jī)能します。

サイプレスvs. Jest/VueテストUtils：比較分析

JestおよびVueテストのUTILは一般的にコンポーネントテストに使用されますが、サイプレスは実際のブラウザ環(huán)境內(nèi)でテストを?qū)g行することで利點(diǎn)を提供します。これにより、視覚的なフィードバック、デバッグ機(jī)能、リアルなブラウザAPIインタラクションが提供されます。 Cypressは、コンポーネントの取り付けとフレームワーク固有のアサーションのためのVUEテストの利用をレバレッジします。

実用的な実裝と課題

Vuetifyを使用した大型VUE 2アプリケーションは、いくつかの課題を提示しました。

• Vuetify統(tǒng)合：事前に構(gòu)成されたVuetifyインスタンスを使用してコンポーネントをマウントし、正しいスタイリングと動(dòng)作を確保するためのカスタムサイプレスコマンドが作成されました。これには、必要なクラスと屬性をサイプレスルート要素（ __cy_root ）に追加することが含まれます。
• 仕様ファイル組織： GLOBパターン（ !(node_modules)**/*.spec.js ）は、 cypress.jsonで使用され、無(wú)関係なファイルを除くコンポーネントと一緒にテストファイルを見(jiàn)つけました。
• コマンドファイルの競(jìng)合：コンポーネントテストコマンドをエンドツーエンドのテストコマンドから分離すると、競(jìng)合が防止されました。
• Vueラッパーへのアクセス：カスタムサイプレスコマンド（ cy.vue() ）は、VueテストUtilsラッパーへのアクセスをアサーション用に簡(jiǎn)素化します。

學(xué)んだ教訓(xùn)とベストプラクティス

當(dāng)初、軽度のしゃっくり（例えば、斷続的なリナーエラー）に遭遇している間、利點(diǎn)は課題を上回ります。異なるレベルで一貫したテストアプローチと、視覚的にコンポーネントを単獨(dú)で開(kāi)発およびテストする能力は、大きな利點(diǎn)です。初期テストのためにシンプルで依存しないコンポーネントを選択することをお?jiǎng)幛幛筏蓼埂?/p>

結(jié)論

サイプレスコンポーネントテストは、既存のエンドツーエンドテストを補(bǔ)完する堅(jiān)牢でユーザーフレンドリーなアプローチを提供します。複數(shù)のツール（VUEテストUTIL、サイプレス、モカ、チャイなど）に精通している間、サイプレスの統(tǒng)合された性質(zhì)により、全體的なテストプロセスが簡(jiǎn)素化されます。改善されたテストの読みやすさと私たちのチーム內(nèi)のテストカバレッジの増加は、その有効性を強(qiáng)調(diào)しています。

以上がサイプレスを使用したVueコンポーネントのテストの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。