How to write unit tests when using a component from vuestic-ui?

[gabriellatavares]

Hello! I was wondering how can I write unit tests when using some of the components? When I try to import it in my test files it gives me ReferenceError: Cannot access 'qf' before initialization. I didn't want to stub it because I have some of my components inside a popover that I need to test. I'm using vue-test-utils with Jest.

[gibranamparan]

Isn't there any response to this? I don't see any docs to know how to mount vuestic components in a vitest / jest set up which.

[gibranamparan]

After some research I think I get it for my specific implementation.
I am using Vue3 + Vuestic + Vitest, which from what I understand this is a pretty standard combo.

This is how injected vuestic components to my unit test.
Under vite.config.ts I have the config definition with a test property with an alias defining "vuestic-ui" this way

defineConfig({
    plugins: [
      vue(),
    ],
    test: {
      environment: "jsdom",
      alias: {
        'vuestic-ui': 'vuestic-ui/dist/esm/main.js'
      },
    },
    // some other configurations
)}

Then in my test.ts file, for example for a test button I create a vuestic instance and use mount options property to mount my custom component with the mount method of vue-test-utils.

import {  createVuestic } from 'vuestic-ui'
import vuesticGlobalConfig from '../src/services/vuestic-ui/global-config'
const vuestic = createVuestic({ config: vuesticGlobalConfig })

const initComponent = () => {
  return mount(TestButton, {
    global: {
      plugins: [vuestic]
    },
  })
}

Then you can use the initComponent inside your test or under a beforeEach hook to init your components in your test.
Hopefully this works for you.