I'm doing a vue unit test
In the unit test using modal (v-dialog), the following error message will be output in warning.
[Vuetify] Unable to locate target [data-app]
I want to unit test without getting this message.
The environment is as follows
Vue.js 3.8.2
Vuetify 1.5.5
A modal appears when you press the preview button, and disappears when you press the play button and the video flows.
The following error message occurred while implementing the function.
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>
Applicable source code
<tr>repeated by for minutes
...
<tr>
...
<td>
<v-dialog v-model = "dialog" width = "700">
<template v-slot: activator = "{on}">
<v-btn color = "play_arrow" flat v-on = "on">Preview button</v-btn>
</template>
<v-card>
<v-card-text v-if = "download_url">
<video: src = "download_url": id = "movie_id" width = "670" controls muted>
<p>Video playback requires a browser that supports video.</p>
</video>
</v-card-text>
<v-card-actions>
<v-btn color = "primary" @ click = "stopAndClose ();dialog = false;">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
...
</tr>
- Even if there is no unit test code, an error message appears.
App.js has the following support
<v-app>⇨<v-app id ="app">
See below
https://qiita.com/kawakami-kazuyoshi/items/5fde4884715a6197c23a
↑
After installing the latest version, there is no<div id ="app">
It was not improved.
I've tried all the responses here, but I can't do it
https://forum.vuejs.org/t/vuetify-data-app-true-and-problems-rendering-v-dialog-in-unit-tests/27495
Thank you very much for your help. ! ! !
-
Answer # 1
-
Answer # 2
<v-app>⇨<v-app id ="app">
<v-app data-app>
. Normally, following the CSS selector,
[data-app]
represents an attribute value named data-app.
Related articles
- vuejs - unable to get properties of associative array managed by vuex
- vuejs - unable to pass to the destination component using vue-router
- [vuejs] unable to access props value with mounted
- raspberry pi - e: unable to locate package libilmbase12 when trying to install libilmbase12 on rasppie
- vuejs - nested list links in vuetify (2110)
- vuejs - about the text color of vuetify v-select choices
- vuejs - unable to retrieve state value from vuex
- vuejs - (wsl) unable to reference other than unique variable name on template side in indexvue of site built with nuxt-vuetify
- vuejs - unable to call action function in vuex and it is written as unknown action type
- Unable to locate program input point on XP system K32GetProcessMemoryInfo solution
- vuejs - i want to show/hide the attributes of vuetify
- i want to display data received by vuejs, vuetify ajax in v-select item
- Solve the issue of Cause: unable to find valid certification path to requested target in Android studio 361
- python 3x - no such element: unable to locate element appears for elements that exist in selenium
- vuejs - unable to get api from axios in nuxtjs vuex store
- vuejs - vuetify calendar content display
- vuejs - i want to turn off the button by page (current path?) in vuetify
- unable to register user in db with docker + laravel + vuejs
- vuejs - vuetify this cannot be used in v-menu
- vuejs - about a program with a vuetify document not working
- html - svg is not displayed when displaying pagenation using vuetify
- build - [vuejs] the built site becomes 404 not found
- javascript - how to use chartjs
- typescript - i want to apply css using scss in nuxt
- typescript - i want to dynamically change the font size using vuejs
- javascript - i want to create a table by dynamically expressing rowspan using vuejs
- javascript - i want to use vuetify's v-simple-table to put a title in the first column
- vuejs - vuetify this cannot be used in v-menu
- javascript - i want to specify multiple: disabled conditions using&&in the vuetify checkbox
- vuejs - i want to show/hide the attributes of vuetify
Warning stops when you put the following comment immediately after the unit test.
Please try