vitest

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+coverage/

README.md

@@ -6,6 +6,7 @@
 [![vuetify][badge-vuetify-img]][badge-vuetify-href]
 [![pinia][badge-pinia-img]][badge-pinia-href]
 [![eslint][badge-eslint-img]][badge-eslint-href]
+[![vitest][badge-vitest-img]][badge-vitest-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
 
 The IT4C Boilerplate for frontends
@@ -20,20 +21,22 @@ To be able to build this project you need:
 
 The following commands are available:
 
-| Command                   | Description                              |
-|---------------------------|------------------------------------------|
-| `npm install`             | Project setup                            |
-| `npm run build`           | Compiles and minifies for production     |
-| `npm run server:prod`     | Runs productions server                  |
-| **Develop**               |                                          |
-| `npm run dev`             | Compiles and hot-reloads for development |
-| `npm run server:dev`      | Run development server                   |
-| **Test**                  |                                          |
-| `npm run lint`            | Runs all linters                         |
-| `npm test`                | Run all tests & linters                  |
-| **Storybook**             |                                          |
-| `npm run storybook`       | Run Storybook                            |
-| `npm run build:storybook` | Build static storybook                   |
+| Command                      | Description                                     |
+|------------------------------|-------------------------------------------------|
+| `npm install`                | Project setup                                   |
+| `npm run build`              | Compiles and minifies for production            |
+| `npm run server:prod`        | Runs productions server                         |
+| **Develop**                  |                                                 |
+| `npm run dev`                | Compiles and hot-reloads for development        |
+| `npm run server:dev`         | Run development server                          |
+| **Test**                     |                                                 |
+| `npm run test:lint`          | Run all linters                                 |
+| `npm run test:unit`          | Run all unit tests in watch mode                |
+| `npm run test:unit:coverage` | Run all unit tests and generate coverage report |
+| `npm test`                   | Run all tests & linters                         |
+| **Storybook**                |                                                 |
+| `npm run storybook`          | Run Storybook                                   |
+| `npm run storybook:build`    | Build static storybook                          |
 
 ## Technology
 
@@ -44,9 +47,9 @@ The following commands are available:
 - [x] pinia store
 - [x] storybook
 - [x] eslint
+- [x] vitest
 - [ ] figma
 - [ ] chromatic
-- [ ] jest
 - [ ] localization?
 - [ ] documentation?
 - [ ] docker
@@ -87,5 +90,9 @@ See [vite-plugin-ssr-vuetify](https://github.com/brillout/vite-plugin-ssr-vuetif
 [badge-eslint-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.eslint&label=eslint&color=yellow
 [badge-eslint-href]: https://eslint.org/
 
+[badge-vitest-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.vitest&label=vitest&color=yellow
+[badge-vitest-href]: https://vitest.dev/
+
+
 [badge-storybook-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.storybook&label=storybook&color=yellow
 [badge-storybook-href]: https://storybook.js.org/

package.json

@@ -17,7 +17,8 @@
     "vuetify",
     "pinia",
     "storybook",
-    "eslint"
+    "eslint",
+    "vitest"
   ],
   "author": "Ulf Gebhardt",
   "license": "Apache-2.0",
@@ -33,9 +34,11 @@
     "server:dev": "npm run server",
     "server:prod": "cross-env NODE_ENV=production npm run server",
     "storybook": "cross-env STORYBOOK=true storybook dev -p 6006",
-    "build-storybook": "cross-env STORYBOOK=true && storybook build",
-    "lint": "eslint --ext .vue,.ts,.tsx,.js,.jsx --max-warnings 0 --ignore-path .gitignore .",
-    "test": "npm run lint"
+    "storybook:build": "cross-env STORYBOOK=true && storybook build",
+    "test:lint": "eslint --ext .vue,.ts,.tsx,.js,.jsx --max-warnings 0 --ignore-path .gitignore .",
+    "test:unit": "vitest",
+    "test:unit:coverage": "npm run test:unit -- run --coverage",
+    "test": "npm run test:lint && npm run test:unit:coverage"
   },
   "dependencies": {
     "@mdi/font": "^7.3.67",
@@ -70,6 +73,8 @@
     "@storybook/vue3-vite": "^7.5.3",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vue/test-utils": "^2.4.2",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
@@ -81,9 +86,11 @@
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.18.1",
     "eslint-plugin-vuetify": "^2.1.0",
+    "jsdom": "^22.1.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.3"
+    "storybook": "^7.5.3",
+    "vitest": "^0.34.6"
   }
 }

src/pages/index/ClickCounter.spec.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ClickCounter from './ClickCounter.vue'
+
+describe('ClickCounter', () => {
+  const wrapper = mount(ClickCounter)
+
+  it('renders Button with a Counter of 0', () => {
+    expect(wrapper.find('v-btn').exists()).toBe(true)
+    expect(wrapper.text()).toBe('Counter 0')
+  })
+})

vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue' // Import the plugin here
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    /*
+    server: {
+      deps: {
+        inline: ['vuetify'],
+      },
+    },
+    */
+  },
+  plugins: [vue()], // Include it in your array of plugins here
+})