# Nuxt3 Vitest 筆記

## 安裝

$ yarn add vitest jsdom @vue/test-utils

## 環境配置
#### 在根目錄新增一個 vitest.config.js 檔案
安裝 `@vitejs/plugin-vue` 套件

$ yarn add @vitejs/plugin-vue

#### vitest.config.js

`plugins`: 加入使用的插件 ex: `vue`、`pinia`...(需在頂層import)。
`global`: 設定為true，則各測試程式不須引入`{ vi, expert, describe ... }`等。
`environment`: 預設為node。經實測後在Nuxt3必須設定`jsdom`或`happy-dom`(兩者擇一安裝)，否則會run不起來。
`setupFiles`: 可放測試程式每次啟動/停止的共用邏輯與方法。
`resolve`: alias設定路徑，在頂層需引入`path`。
`'#import'`: 可解決Nuxt的自動引入(auto-import)功能所引起的錯誤。

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

export default defineConfig({
    plugins: [vue()],
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: ['./test/setup-teardown.js'],
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './components'),
            '~': path.resolve(__dirname, './pages'),
            '#imports': path.resolve(__dirname, './.nuxt/imports.d.ts')
        }
    }
})

## 如何 mock useRouter 和 router.push

#### search.vue

<script setup>
import { ref } from 'vue'
import { useRouter } from '#imports' // 引入

const keyword = ref('')

function search(keyword = '') {
    // ...
    const router = useRouter()
    router.push({ ... }) // 這邊有push的方法
}
</script>

#### search.spec.js

<script setup>
import { ref } from 'vue'
import { useRouter } from '#imports' // 引入

const keyword = ref('')

function search(keyword = '') {
    // ...
    const router = useRouter()
    router.push({ ... }) // 這邊有push的方法
}
</script>