feat: added the vitest configs

env.d.ts

@@ -1 +1,7 @@
 /// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

lib/main.ts

@@ -1,4 +1,3 @@
-import HelloWorld from '../src/components/HelloWorld.vue';
 import Button from '../src/components/Button/Button.vue';
 
-export { HelloWorld, Button };
+export { Button };

package.json

@@ -17,7 +17,8 @@
     "dev": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview --port 4173",
-    "test:unit": "vitest --environment jsdom",
+    "test:unit": "vitest",
+    "test:coverage": "vitest run --coverage",
     "build-only": "vite build",
     "type-check": "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",
@@ -42,10 +43,11 @@
     "@storybook/vue3": "^6.5.10",
     "@types/jsdom": "^20.0.0",
     "@types/node": "^16.11.48",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitest/coverage-c8": "^0.22.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.0.2",
+    "@vue/test-utils": "^2.0.0",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
@@ -62,8 +64,8 @@
     "prettier": "^2.7.1",
     "tailwindcss": "^3.1.8",
     "typescript": "~4.7.4",
-    "vite": "^3.0.4",
-    "vitest": "^0.21.0",
+    "vite": "^3.0.8",
+    "vitest": "^0.22.1",
     "vue-loader": "^16.8.3",
     "vue-tsc": "^0.39.5"
   },

src/components/Button/Button.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Button from './Button.vue';
+
+describe('Button', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Button, { props: { label: 'Hello Vitest' } });
+    expect(wrapper.text()).toContain('Hello Vitest');
+  });
+});

src/components/Button/Button.stories.js → src/components/Button/Button.stories.ts

@@ -1,4 +1,5 @@
 import MyButton from './Button.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
@@ -22,22 +23,17 @@ export default {
     icon: { control: 'text' },
     onClick: {},
   },
-};
+} as Meta<typeof MyButton>;
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template: StoryFn<typeof MyButton> = (args) => ({
   components: { MyButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: '<my-button v-bind="args" />',
 });
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Primary.args = {
   role: 'primary',
   label: 'Primary Button',

tsconfig.json

@@ -10,5 +10,12 @@
     {
       "path": "./tsconfig.vitest.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "types": ["vitest/globals"]
+  }
 }

vite.config.ts

@@ -32,4 +32,7 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    collectCoverage: true,
+  },
 });

vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite';
+import Vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [Vue()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+});