Unable to test vue component with v-dialog

Question

I have been killing myself trying to figure out how to test a Vue component with a v-dialog, something which worked perfectly fine in Vue2. Currently I am using Vue3, Vitest, Vuetify3.

here is a very simple component which demonstrates a problem

<template>
  <div>
    <v-btn @click.stop="dialog=true" class="open-dialog-btn">click me please</v-btn>
    <v-dialog v-model="dialog" max-width="290" >
      <div class="dialog-content">
        <v-card>welcome to dialog</v-card>
      </div>
    </v-dialog>
  </div>
</template>

<script setup>
import {ref} from "vue";

const dialog = ref(false);
</script>

and here is a unit test for it:

import '../setup';
import { mount } from '@vue/test-utils';
import { createVuetify } from "vuetify";
import HelloDialog from "@/components/HelloDialog.vue";

describe('HelloDialog', () => {
  let wrapper;
  let vuetify;

  beforeEach(() => {
    vuetify = createVuetify();
  });

  describe('dialog tests', () => {
    beforeEach(async () => {
      wrapper = await mount(HelloDialog, {
        global: {
          plugins: [vuetify],
        },
      });
    });

    test('test dialog', async () => {
      expect(wrapper.find('.dialog-content').exists()).toBeFalsy();
      await wrapper.find('.open-dialog-btn').trigger('click');
      console.log(wrapper.html());
      expect(wrapper.find('.dialog-content').exists()).toBeTruthy();
    });
  });
});

the last line in unit test is not working - dialog content is not displayed. Here is an output from wrapper.html() after button is clicked:

<div><button type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-elevated open-dialog-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
    <!----><span class="v-btn__content" data-no-activator="">click me please</span>
    <!---->
    <!---->
  </button>
  <!---->
  <!--teleport start-->
  <!--teleport end-->
</div>

AssertionError: expected false to be truthy
    at ....../HelloDialog.spec.js:27:56

here is test section from vite.config.js :

  test: {
    // https://vitest.dev/config/
    globals:true,
    environment: 'happy-dom',
    setupFiles: "vuetify.config.js",
    deps: {
      inline: ["vuetify"],
    },
  },

and here is vuetify.config.js :

global.CSS = { supports: () => false };

here some versions from package.json :

  "dependencies": {
    "@mdi/font": "7.1.96",
    "@pinia/testing": "^0.0.14",
    "axios": "^1.2.0",
    "dotenv": "^16.0.3",
    "happy-dom": "^8.1.1",
    "jsdom": "^20.0.3",
    "lodash": "^4.17.21",
    "pinia": "^2.0.27",
    "roboto-fontface": "*",
    "vue": "^3.2.45",
    "vuetify": "3.0.6",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/test-utils": "^2.2.6",
    "vite": "^4.0.3",
    "vite-plugin-vuetify": "^1.0.0-alpha.12",
    "vitest": "^0.26.2"
  }

I have tried everything at this point, and I think the problem has something to do with v-dialog using teleport component. After struggling for several days trying to figure out I settled on using a stub to not use a real dialog when testing but I really don't like this approach.

any ideas would be greatly appreciated

Answer 1

I have the same issue and found the content of v-dialog was rendered in document.body when I called mount() . You can test the dialog content like below.

// expect(wrapper.find('.dialog-content').exists()).toBeTruthy();
expect(document.querySelector('.dialog-content')).not.toBeNull();

I recommend to call unmount() after each test.

afterEach(() => {
  wrapper.unmount()
});

Hope this helps although I doubt it's a good approach because I don't want to care whether the component is using teleport or not.