Vue test config with vitest

client/.eslintrc.cjs

@@ -1,28 +1,19 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
-  "root": true,
+  'root': true,
-  "extends": [
+  'extends': [
-    "plugin:vue/vue3-essential",
+    'plugin:vue/vue3-essential',
-    "eslint:recommended",
+    'eslint:recommended',
-    "@vue/eslint-config-typescript/recommended",
+    '@vue/eslint-config-typescript/recommended',
-    "@vue/eslint-config-prettier"
+    // "@vue/eslint-config-prettier"
   ],
-  "env": {
+  'env': {
-    "vue/setup-compiler-macros": true
+    'vue/setup-compiler-macros': true
   },
-  "overrides": [
+  'rules': {
-    {
+    'quotes': ['error', 'single'],
-      "files": [
+    '@typescript-eslint/no-unused-vars': ['warn'],
-        "cypress/integration/**.spec.{js,ts,jsx,tsx}"
-      ],
-      "extends": [
-        "plugin:cypress/recommended"
-      ]
-    }
-  ],
-  "rules": {
-    "quotes": ["error", "single"]
   }
 }

client/package.json

@@ -4,10 +4,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && cp ./dist/index.html ../server/vbv_lernwelt/templates/vue/index.html && cp -r ./dist/static/vue ../server/vbv_lernwelt/static/",
-    "preview": "vite preview --port 5050",
+    "test": "vitest run",
-    "test:unit": "vitest --environment jsdom",
+    "coverage": "vitest run --coverage",
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
@@ -26,6 +24,7 @@
     "@intlify/vite-plugin-vue-i18n": "^3.4.0",
     "@rollup/plugin-alias": "^3.1.9",
     "@rushstack/eslint-patch": "^1.1.0",
+    "@testing-library/vue": "^6.6.0",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.26",
     "@vitejs/plugin-vue": "^2.3.1",
@@ -38,7 +37,7 @@
     "eslint": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^8.2.0",
-    "jsdom": "^19.0.0",
+    "happy-dom": "^5.3.1",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "prettier": "^2.5.1",
@@ -47,7 +46,7 @@
     "start-server-and-test": "^1.14.0",
     "typescript": "~4.6.3",
     "vite": "^2.9.1",
-    "vitest": "^0.8.1",
+    "vitest": "^0.15.1",
     "vue-tsc": "^0.33.9"
   }
 }

client/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-import': {},
-    autoprefixer: {},
-  },
-}

client/src/components/__tests__/MainNavigationBar.spec.ts

@@ -1,11 +1,11 @@
-import { describe, it, expect } from 'vitest'
+import {describe, expect, it} from 'vitest'
 
-import { mount } from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 import MainNavigationBar from '../MainNavigationBar.vue'
 
 describe('MainNavigationBar', () => {
   it('renders properly', () => {
-    const wrapper = mount(MainNavigationBar, { })
+    const wrapper = mount(MainNavigationBar, {})
-    expect(wrapper.text()).toContain('Ich bin ein myVBV Heade')
+    expect(wrapper.text()).toContain('myVBV')
   })
 })

client/tsconfig.vitest.json

@@ -4,6 +4,10 @@
   "compilerOptions": {
     "composite": true,
     "lib": [],
-    "types": ["node", "jsdom"]
+    "types": [
+      "node",
+      "jsdom",
+      "vitest/globals"
+    ]
   }
 }

client/vite.config.ts

@@ -6,17 +6,17 @@ import vue from '@vitejs/plugin-vue'
 import alias from '@rollup/plugin-alias'
 
 // https://vitejs.dev/config/
-export default defineConfig(({mode}) => {
+export default defineConfig(({ mode }) => {
-  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
   return {
     plugins: [
       vue({
         template: {
           compilerOptions: {
             // treat all tags which start with '<it-' as custom elements
-            isCustomElement: (tag) => tag.startsWith('it-')
+            isCustomElement: (tag) => tag.startsWith('it-'),
-          }
+          },
-        }
+        },
       }),
       // vueI18n({
       //   include: path.resolve(__dirname, './locales/**')
@@ -40,6 +40,10 @@ export default defineConfig(({mode}) => {
     },
     build: {
       assetsDir: 'static/vue',
-    }
+    },
+    test: {
+      globals: true,
+      environment: 'happy-dom',
+    },
   }
 })