Nuxt JS/Vue Jest がチェックするクラス名要素がページ上に存在することを確認してください

Question

私は Vue JS の Jest テスト スイートを初めて使用し、それを Nuxt JS アプリケーションに統合しています。コンポーネントが Vue インスタンスであるかどうかを確認するための基本的なテストをいくつか設定し、これらのテストが正常に成功したことを確認しました。

現在、ページ上で要素を見つけて、それが存在するかどうか、またそこにどのようなコンテンツが含まれているかを確認しようとしています。

これが私の構造です

pages/application/begin.vue

リーリー

コンポーネント/フォーム/ステップ/ローン/LoanTerm.vue

リーリー

私が設定したテストでは次のことが得られます:

リーリー

このテストを実行したときに得られる結果が、「選択する条件」です。 「エラー.

を受け取ったため、テストは失敗しました。」

findAll も使用してみましたが、何も返されません

＃＃＃私は何を取りこぼしたか？

Answer 1

termSelectionModalIsOpen が false に初期化されているため、modal のコンテンツ (テストで探している「datasets-terms」ボタンを含む) が最初はレンダリングされないようです。 であり、これを true に設定する設定はありません。パターンは次のようになります:

リーリー ＃＃＃解決＃＃＃

data()

プロパティを使用して

LoanTerm をマウントします。これにより、モーダルのコンテンツがレンダリングされるように、termSelectionModalIsOpen が true に初期化されます。 : リーリー

jest__datasets-terms

クラスが LoanTerm.vue にないことに気付きましたが、これは単なるコピー＆ペーストのエラーだと思います。 ＃＃＃＃＃＃デモ＃＃＃＃＃＃