Home>

vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning

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

Feature description

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.

Error message 
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

...
  &lt;tr&gt;
    ...
    &lt;td&gt;
      &lt;v-dialog v-model = "dialog" width = "700"&gt;
        &lt;template v-slot: activator = "{on}"&gt;
          &lt;v-btn color = "play_arrow" flat v-on = "on"&gt;Preview button&lt;/v-btn&gt;
        &lt;/template&gt;
        &lt;v-card&gt;
          &lt;v-card-text v-if = "download_url"&gt;
            &lt;video: src = "download_url": id = "movie_id" width = "670" controls muted&gt;
              &lt;p&gt;Video playback requires a browser that supports video.&lt;/p&gt;
            &lt;/video&gt;
          &lt;/v-card-text&gt;
          &lt;v-card-actions&gt;
            &lt;v-btn color = "primary" @ click = "stopAndClose ();dialog = false;"&gt;Close&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
        &lt;/v-card&gt;
      &lt;/v-dialog&gt;
    &lt;/td&gt;
    ...
  &lt;/tr&gt;
  • 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. ! ! !

vue.js vuetify.js
  • Answer # 1

    Warning stops when you put the following comment immediately after the unit test.
    Please try

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

  • Answer # 2

      

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

    instead of

      

    <v-app data-app>

    It may be

    . Normally, following the CSS selector,[data-app]represents an attribute value named data-app.

Related articles