feat: use vitest for testing

README.md

@@ -26,10 +26,13 @@
 
 - 🔥 Use the [new `<script setup>` style](https://github.com/vuejs/rfcs/pull/227)
 
+- ✅ Use [Vitest](http://vitest.dev/) for unit and components testing
+
 - 🦾 TypeScript, of course
 
 - ☁️ Deploy on Netlify, zero-config
 
+
 <br>
 
 See [Vitesse](https://github.com/antfu/vitesse) for full featureset.

auto-imports.d.ts

@@ -1,9 +1,15 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
+  const afterAll: typeof import('vitest')['afterAll']
+  const afterEach: typeof import('vitest')['afterEach']
+  const assert: typeof import('vitest')['assert']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const beforeAll: typeof import('vitest')['beforeAll']
+  const beforeEach: typeof import('vitest')['beforeEach']
   const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
+  const chai: typeof import('vitest')['chai']
   const computed: typeof import('vue')['computed']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
@@ -19,9 +25,11 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const describe: typeof import('vitest')['describe']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const EffectScope: typeof import('vue')['EffectScope']
+  const expect: typeof import('vitest')['expect']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -31,8 +39,10 @@ declare global {
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const it: typeof import('vitest')['it']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
+  const mock: typeof import('vitest')['mock']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
@@ -62,8 +72,13 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const sinon: typeof import('vitest')['sinon']
+  const spy: typeof import('vitest')['spy']
+  const stub: typeof import('vitest')['stub']
+  const suite: typeof import('vitest')['suite']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const templateRef: typeof import('@vueuse/core')['templateRef']
+  const test: typeof import('vitest')['test']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
   const toRaw: typeof import('vue')['toRaw']
@@ -114,6 +129,7 @@ declare global {
   const useFavicon: typeof import('@vueuse/core')['useFavicon']
   const useFetch: typeof import('@vueuse/core')['useFetch']
   const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
   const useFps: typeof import('@vueuse/core')['useFps']
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']

components.d.ts

@@ -4,6 +4,7 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Counter: typeof import('./src/components/Counter.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
   }
 }

package.json

@@ -4,7 +4,8 @@
     "dev": "vite --port 3333 --open",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext=.ts,.vue"
+    "lint": "eslint . --ext=.ts,.vue",
+    "test": "vitest"
   },
   "dependencies": {
     "@vueuse/core": "^7.2.2",
@@ -17,13 +18,15 @@
     "@types/node": "^16.11.12",
     "@unocss/reset": "^0.15.6",
     "@vitejs/plugin-vue": "^1.10.2",
+    "@vue/test-utils": "^2.0.0-rc.17",
     "eslint": "^8.4.1",
     "pnpm": "^6.23.6",
     "typescript": "^4.5.2",
     "unocss": "^0.15.6",
-    "unplugin-auto-import": "^0.5.1",
+    "unplugin-auto-import": "^0.5.3",
     "unplugin-vue-components": "^0.17.6",
     "vite": "^2.7.1",
-    "vite-plugin-pages": "^0.18.2"
+    "vite-plugin-pages": "^0.18.2",
+    "vitest": "^0.0.44"
   }
 }

src/components/Counter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initial: number
+}>()
+
+const { count, inc, dec } = useCounter(props.initial)
+</script>
+
+<template>
+  <div>
+    {{ count }}
+    <button class="inc" @click="inc()">
+      +
+    </button>
+    <button class="dec" @click="dec()">
+      -
+    </button>
+  </div>
+</template>

test/__snapshots__/component.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Counter.vue > should render 1`] = `"<div>10 <button class=\\"inc\\"> + </button><button class=\\"dec\\"> - </button></div>"`;

test/basic.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Hi', () => {
+  it('should works', () => {
+    expect(1 + 1).toEqual(2)
+  })
+})

test/component.test.ts

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import Counter from '../src/components/Counter.vue'
+
+describe('Counter.vue', () => {
+  it('should render', () => {
+    const wrapper = mount(Counter, { props: { initial: 10 } })
+    expect(wrapper.text()).toContain('10')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should be interactive', async() => {
+    const wrapper = mount(Counter, { props: { initial: 0 } })
+    expect(wrapper.text()).toContain('0')
+
+    expect(wrapper.find('.inc').exists()).toBe(true)
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.text()).toContain('1')
+  })
+})

vite.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
         'vue',
         'vue-router',
         '@vueuse/core',
+        'vitest',
       ],
       dts: true,
     }),
@@ -60,4 +61,8 @@ export default defineConfig({
       'vue-demi',
     ],
   },
+
+  test: {
+    dom: 'jsdom',
+  },
 })