質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

解決済

2回答

4908閲覧

[Vuetify] Unable to locate target [data-app]のWarningが出ないようにユニットテストしたい

YoshiSeki

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2019/06/02 14:01

前提・実現したいこと

vueのユニットテストをしているのですが
モーダル(v-dialog)を使用したユニットテストではwarningで以下のエラーメッセージが出力されてしまいます。

[Vuetify] Unable to locate target [data-app]

このメッセージが出ないでUnitテストしたいです。

環境は以下の通り
Vue.js 3.8.2
Vuetify 1.5.5

機能の説明

プレビューボタンを押したらモーダルが出現し、再生ボタンを押すと動画が流れ閉じると消える。
機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

console.warn node_modules/vuetify/dist/vuetify.js:25165 [Vuetify] Unable to locate target [data-app] found in ---> <VDialog> <MovieItem> <VDataTable> <MoviesList> <Root> console.warn node_modules/vuetify/dist/vuetify.js:25165 [Vuetify] Unable to locate target [data-app] found in ---> <VDialog> <MovieItem> <VDataTable> <MoviesList> <Root> console.warn node_modules/vuetify/dist/vuetify.js:25165 [Vuetify] Unable to locate target [data-app] found in ---> <VDialog> <MovieItem> <VDataTable> <MoviesList> <Root> console.warn node_modules/vuetify/dist/vuetify.js:25165 [Vuetify] Unable to locate target [data-app] found in ---> <VDialog> <MovieItem> <VDataTable> <MoviesList> <Root>

該当のソースコード

<tr>のfor分による繰り返し

vue.js

1 ... 2 <tr> 3 ... 4 <td> 5 <v-dialog v-model="dialog" width="700"> 6 <template v-slot:activator="{ on }"> 7 <v-btn color="play_arrow" flat v-on="on">プレビューボタン</v-btn> 8 </template> 9 <v-card> 10 <v-card-text v-if="download_url"> 11 <video :src="download_url" :id="movie_id" width="670" controls muted> 12 <p>動画を再生するには動画をサポートしたブラウザが必要です。</p> 13 </video> 14 </v-card-text> 15 <v-card-actions> 16 <v-btn color="primary" @click="stopAndClose(); dialog = false;">閉じる</v-btn> 17 </v-card-actions> 18 </v-card> 19 </v-dialog> 20 </td> 21 ... 22 </tr>
  • ユニットテストのコードはなくてもエラーメッセージが出てしまいます。

試したこと

App.jsに以下の対応をした
<v-app><v-app id="app">
以下を参考
https://qiita.com/kawakami-kazuyoshi/items/5fde4884715a6197c23a

最新のバージョンインストールしたら<div id="app">というのは存在しないのですが念のため参考にしてみた。
改善されないでした。

こちらで出ている対応も全てやってみましたができない
https://forum.vuejs.org/t/vuetify-data-app-true-and-problems-rendering-v-dialog-in-unit-tests/27495

かなり困っているので大変お手数ですがお助けください!!!!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ユニットテストの直後に以下のコメントを入れるとWarningが止まります。
お試しください

describe("MyComponent.vue, () => { const app = document.createElement("div"); app.setAttribute("data-app", true); document.body.append(app); ...

投稿2019/06/09 08:45

yoshis22

総合スコア107

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YoshiSeki

2019/06/09 08:47

助かりました。止まりました
guest

0

<v-app><v-app id="app">

ではなくて

<v-app data-app>

とかかもしれないですね。通常、CSSセレクタに追いて [data-app] は、data-appという名前の属性値を表します。

投稿2019/06/02 20:05

otolab

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YoshiSeki

2019/06/02 20:56

早速の回答ありがとうございます。 <v-app data-app>で試しても<v-app data-app id="app">でも試しても エラーの解消ができない状態です。 他にいい方法がないので苦戦中です
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問