PrimeVue3 Components not rendered when mounted within test-utils

[Restage]

Hi everyone,

I've written a Vue3 application, which uses PrimeVue3 as component library. Now I would like to write tests for my graphical user interface. But I can not get Vitest and Vue-Utils to render the PrimeVue3 components within the test. All I see is the plain <template> code. My project has the following setup:

  "dependencies": {
    "core-js": "^3.8.3",
    "primevue": "^3.20.0",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitest/coverage-c8": "^0.25.3",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.2.6",
    "jsdom": "^20.0.3",
    "vitest": "^0.25.3"
  },

Of course this config was shortend by me to the entries I think are relevant for my question.

My vitest.config.js includes Vue and PrimeVue3 as plugins.

import { defineConfig } from "vitest/config";
import Vue from "@vitejs/plugin-vue";
import PrimeVue from 'primevue/config';

export default defineConfig({
    plugins: [Vue(), PrimeVue],
    test: {
        globals: true,
        environment: "jsdom",
    },
    root: ".", //Define the root
});

In my test I do the following:

import { mount } from "@vue/test-utils";
import { describe, test, expect } from 'vitest';
import ServerDialog from 'src/views/server/ServerDialog.vue';

const componentWrapper = mount(ServerDialog, {
    props: {
        data: {}
    }
})

describe("ServerDialog test", () => {
  test("example test", () => {
      expect(componentWrapper.find('#it_server_address').exists()).to.be.true;
      console.log(componentWrapper.html())
  })
})

The test fails looking for a definitly existing id from my component. In the logged html I see none rendered code like this:

<pvdialog visible="true" modal="true" draggable="false" data-v-df3156ea="">
  <div class="field" data-v-df3156ea=""><label for="it_server_address" data-v-df3156ea="">Adresse</label>
    <pvinputtext id="it_server_address" data-v-df3156ea=""></pvinputtext>
  </div>
</pvdialog>

What am I missing as a dependency or configuration?

One further advice: I added the PrimeVue3 Dialog and InputText components with an alias. That is why they are shown as <pvdialog> and <pvinputtext>. I have also tried to use default names, but this did not change the behaviour.

app.use(PrimeVue);
app.component('pvDialog', Dialog);
app.component('pvInputText', InputText);

Best regards,
Richard

[cexbrayat]

Hi @Restage

I'm not familiar with PrimeVue3, but is it a Vite plugin? I think it is a Vue plugin (hence why you use app.use(PrimeVue), so maybe you don't need to add it to your vitest config?

What I thin is that you do need to add it to your mount options. See https://test-utils.vuejs.org/api/#global

Something like:

mount(ServerDialog, {
  global: {
    plugins: [PrimeVue]
  }
}

and if you're using alias, you probably need to define them to:

mount(ServerDialog, {
  global: {
    plugins: [PrimeVue],
    components: {
      pvDialog: Dialog,
      pvInputText: inputText
    }
  }
}

If that does not work, can you provide us a small repro online using https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue?initialPath=__vitest__ ? With a repro we can more easily help you.