Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Testing
#

Here is guide how to setup testing with {'@vue/test-utils'} using Vitest or Jest. To get tests working with VuesticUI you need to install vuestic plugin.

Setup file
#

First, we need to create a file called setup. It can be placed anywhere in your project. Here we need to register VuesticPlugin. in {'@vue/test-utils'}.

// tests/setup.js
import { config } from '@vue/test-utils'
import { createVuestic } from 'vuestic-ui'

config.global.plugins.push(createVuestic())

Vitest
#

Register setup file into vitest config. Here is an example of vitest.config.ts file:

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: resolve('./tests/setup.js'), // Path to setup file
  },
})

Jest
#

Register setup file into jest config. You will need to edit of package.json file and jest filed:

{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest"
    },
    "testURL": "http://localhost/",
    "setupFile": [
      "./tests/setup.js"
    ]
  }
}