Testing Dialogs with Vitest and Teleported Wrapper not Working

[julianctni]

Hi all,
in your release notes for 2.15.2 you said that testing dialogs is now easier with accessing the QPortal component. I updated to 2.15.2 and wanted to try this, however the QPortal wrapper is not found. The mounted WidgetDialog component has a QDialog as its root element.

installQuasarPlugin({ plugins: { Dialog } }); // also tried without the param

...

describe('WidgetDialog', () => {
  it('mounts component', () => {
    const wrapper = mount(WidgetDialog);
    const portalWrapper = wrapper.findComponent({ name: 'QPortal' });
    expect(portalWrapper.exists()).toBe(true);
  });
});

results in

These are my dependencies:

  "dependencies": {
    "@quasar/extras": "^1.16.10",
    "pinia": "^2.1.7",
    "quasar": "^2.15.2",
    "vue": "^3.4.21",
    "vue-component-type-helpers": "^1.8.27",
    "vue-echarts": "^6.6.9",
    "vue-i18n": "^9.10.2",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
    "@pinia/testing": "^0.1.3",
    "@quasar/app-vite": "^1.8.0",
    "@quasar/quasar-app-extension-testing": "^2.2.0",
    "@quasar/quasar-app-extension-testing-unit-vitest": "^0.3.1",
    "@types/node": "^20.12.2",
    "@vitest/coverage-v8": "^0.34.6",
    "@vitest/ui": "^0.34.7",
    "@vue/test-utils": "^2.4.5",
    "autoprefixer": "^10.4.19",
    "prettier": "^3.1.1",
    "typescript": "5.3.3",
    "vitest": "^0.34.6"
  },
  "engines": {
    "node": "^20 || ^18 || ^16",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  },
  "resolutions": {
    "vite": "^3.2.10",
    "@vitejs/plugin-vue": "^3.2.0"
  }

Am I doing something wrong? I hope, there is an easy solution.

Thanks in advance!

Best regards from Germany
Julian

[julianctni]

I really hoped this would finally work with the new versions of vitest testing dependencies coming with app-vite2.0, however it still doesn't work. @rstoenescu do you have an idea or hint what I am doing wrong?

[p0wl90]

Same problem here, I also hoped that the major vitest update will fix it :'(

[jottplus]

I have the same problem

[IlliaVeremiev]

Faced the same issue. It works for me with modelValue property

describe('WidgetDialog', () => {
  it('mounts component', async () => {
    const wrapper = mount(WidgetDialog, {
      props: {
        modelValue: true
      }
    });
    await nextTick()
    const portalWrapper = wrapper.findComponent({ name: 'QPortal' });
    expect(portalWrapper.exists()).toBe(true);
  });
});

[julianctni]

I tried your approach, however it still claims that the portalWrapper does not exist. We are using the Quasar dialog plugin, could this be the reason?

[IlliaVeremiev]

Ah sorry, that's my fault. I see the mistake now, 2nd parameter is not props itself. Attached completed working variant.

// widget-dialog.test.ts

import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest'
import { mount } from '@vue/test-utils'
import WidgetDialog from 'app/test/vitest/__tests__/demo/WidgetDialog.vue'
import { describe, expect, it } from 'vitest'
import { nextTick } from 'vue'

installQuasarPlugin()

describe('WidgetDialog', () => {
  it('mounts component', async () => {
    const wrapper = mount(WidgetDialog, {
      props: {
        modelValue: true
      }
    })
    await nextTick()
    const portalWrapper = wrapper.findComponent({ name: 'QPortal' })
    expect(portalWrapper.exists()).toBe(true)
    expect(portalWrapper.findAllComponents({ name: 'QBtn' })).toHaveLength(2)
  })
})

// WidgetDialog.vue
// Empty dialog plugin component from https://quasar.dev/quasar-plugins/dialog/#sfc-with-script-setup-and-composition-api-variant

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <!--
        ...content
        ... use q-card-section for it?
      -->

      <!-- buttons example -->
      <q-card-actions align="right">
        <q-btn color="primary" label="OK" @click="onOKClick" />
        <q-btn color="primary" label="Cancel" @click="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar'

const props = defineProps({
  // ...your custom props
})

defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
])

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
// dialogRef      - Vue ref to be applied to QDialog
// onDialogHide   - Function to be used as handler for @hide on QDialog
// onDialogOK     - Function to call to settle dialog with "ok" outcome
//                    example: onDialogOK() - no payload
//                    example: onDialogOK({ /*...*/ }) - with payload
// onDialogCancel - Function to call to settle dialog with "cancel" outcome

// this is part of our example (so not required)
function onOKClick () {
  // on OK, it is REQUIRED to
  // call onDialogOK (with optional payload)
  onDialogOK()
  // or with payload: onDialogOK({ ... })
  // ...and it will also hide the dialog automatically
}
</script>

[julianctni]

it works! thank you very much! I think you may now officially call yourself santa claus 🎅