test: migrate to nuxt-vitest (#785)

* chore(deps-dev): install nuxt-vitest package

* test: migrate to nuxt-vitest

* chore(deps): remove unused dependencies

* test: remove unused stubs

* chore(deps): update dependencies

* style: fix format

__tests__/__snapshots__/app.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`app.vue > renders correctly 1`] = `
 <div>

__tests__/components/SearchBox.test.ts

@@ -1,3 +1,4 @@
+import { mockNuxtImport } from 'nuxt-vitest/utils'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { ref } from 'vue'
 
@@ -7,6 +8,8 @@ import useSongList from '~~/composables/useSongList'
 import { mountAsync, plugins } from '../test-utils'
 
 vi.mock('~~/composables/useSongList')
+const push = vi.fn()
+mockNuxtImport('useRouter', () => () => ({ push }))
 
 describe('components/SearchBox.vue', () => {
   const songs = [
@@ -43,8 +46,7 @@ describe('components/SearchBox.vue', () => {
   describe('autocomplete', () => {
     test('@select calls router.push("/songs/{id}")', async () => {
       // Arrange
-      const push = vi.fn()
-      vi.mocked(useRouter).mockReturnValue({ push } as any)
+      push.mockReset()
 
       // Act
       const wrapper = await mountAsync(SearchBox, { global: { plugins } })

__tests__/components/__snapshots__/Navbar.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components/Navbar.vue > renders correctly 1`] = `
 <nav

__tests__/components/__snapshots__/SearchBox.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components/SearchBox.vue > snapshot test > { term: "" } renders input without autocomplete 1`] = `
 <section>

__tests__/components/content/__snapshots__/Charts.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components/content/Charts.vue > renders tags 1`] = `
 <div

__tests__/components/content/__snapshots__/Level.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components/content/Level.vue > renders series link 1`] = `
 <div
@@ -9,7 +9,7 @@ exports[`components/content/Level.vue > renders series link 1`] = `
   >
     <a
       class="tag"
-      style="background-color: darkviolet; color: rgb(255, 255, 255);"
+      style="background-color: darkviolet; color: #fff;"
     >
       <span
         title="Dance Dance Revolution (JP)"

__tests__/components/content/__snapshots__/Prose.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components/content/ > ProseA.vue > { href: "/songs" } renders <NuxtLink> 1`] = `
 <a

__tests__/components/content/__snapshots__/SeriesList.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components/content/SeriesList.vue > renders series link 1`] = `
 <ul>

__tests__/content/series.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment node
 import { existsSync } from 'node:fs'
 import { readdir, readFile } from 'node:fs/promises'
 import { basename } from 'node:path'

__tests__/content/songs.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment node
 import { existsSync } from 'node:fs'
 import { readdir, readFile } from 'node:fs/promises'
 import { basename } from 'node:path'

__tests__/pages/__snapshots__/index.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`pages/index.vue > renders correctly 1`] = `
 <section

__tests__/pages/index.test.ts

@@ -10,14 +10,15 @@ import { mockSoftwareList, mountAsync, plugins } from '../test-utils'
 vi.mock('~~/composables/useSoftwareList')
 
 describe('pages/index.vue', () => {
+  const global = { plugins, stubs: { NuxtLink: RouterLinkStub } }
+
   test('renders correctly', async () => {
     // Arrange
     const softwareList = ref(mockSoftwareList)
     vi.mocked(useSoftwareList).mockResolvedValue({ softwareList })
 
     // Act
-    const stubs = { NuxtLink: RouterLinkStub }
-    const wrapper = await mountAsync(Index, { global: { plugins, stubs } })
+    const wrapper = await mountAsync(Index, { global })
 
     // Assert
     expect(wrapper.element).toMatchSnapshot()

__tests__/pages/series/[id].test.ts

@@ -1,4 +1,5 @@
-import { beforeAll, describe, expect, test, vi } from 'vitest'
+import { mockNuxtImport } from 'nuxt-vitest/utils'
+import { describe, expect, test, vi } from 'vitest'
 import { ref } from 'vue'
 
 import useSoftwareData from '~~/composables/useSoftwareData'
@@ -7,23 +8,16 @@ import SeriesDetail from '~~/pages/series/[id].vue'
 import { mockSoftware, mountAsync, plugins } from '../../test-utils'
 
 vi.mock('~~/composables/useSoftwareData')
+mockNuxtImport('useRoute', () => () => ({ params: { id: mockSoftware.slug } }))
 
 describe('pages/series/[id].vue', () => {
-  const stubs = { ContentRenderer: true, Head: true, Title: true }
-  const global = { plugins, stubs }
-
-  beforeAll(() => {
-    vi.mocked(useRoute).mockReturnValue({
-      params: { id: mockSoftware.slug },
-    } as any)
-  })
+  const global = { plugins, stubs: { ContentRenderer: true } }
 
   describe('snapshot test', () => {
     test('renders correctly', async () => {
       // Arrange
-      vi.mocked(useSoftwareData).mockResolvedValue({
-        software: ref(mockSoftware),
-      })
+      const software = ref(mockSoftware)
+      vi.mocked(useSoftwareData).mockResolvedValue({ software })
 
       // Act
       const wrapper = await mountAsync(SeriesDetail, { global })

__tests__/pages/series/__snapshots__/[id].test.ts.snap

@@ -1,12 +1,16 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`pages/series/[id].vue > snapshot test > renders correctly 1`] = `
 <section
   class="section"
 >
-  <head-stub />
+  
+  <!---->
+  
   <content-renderer-stub
     class="content"
+    excerpt="false"
+    tag="div"
     value="[object Object]"
   />
 </section>

__tests__/pages/songs/[id].test.ts

@@ -1,4 +1,5 @@
-import { beforeAll, describe, expect, test, vi } from 'vitest'
+import { mockNuxtImport } from 'nuxt-vitest/utils'
+import { describe, expect, test, vi } from 'vitest'
 import { ref } from 'vue'
 
 import useSongData from '~~/composables/useSongData'
@@ -7,16 +8,10 @@ import SongDetail from '~~/pages/songs/[id].vue'
 import { mockSong, mountAsync, plugins } from '../../test-utils'
 
 vi.mock('~~/composables/useSongData')
+mockNuxtImport('useRoute', () => () => ({ params: { id: mockSong.slug } }))
 
 describe('pages/songs/[id].vue', () => {
-  const stubs = { ContentRenderer: true, Head: true, Title: true }
-  const global = { plugins, stubs }
-
-  beforeAll(() => {
-    vi.mocked(useRoute).mockReturnValue({
-      params: { id: mockSong.slug },
-    } as any)
-  })
+  const global = { plugins, stubs: { ContentRenderer: true } }
 
   describe('snapshot test', () => {
     test('renders correctly', async () => {

__tests__/pages/songs/__snapshots__/[id].test.ts.snap

@@ -1,12 +1,16 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`pages/songs/[id].vue > snapshot test > renders correctly 1`] = `
 <section
   class="section"
 >
-  <head-stub />
+  
+  <!---->
+  
   <content-renderer-stub
     class="content"
+    excerpt="false"
+    tag="div"
     value="[object Object]"
   />
 </section>

__tests__/pages/songs/__snapshots__/index.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`pages/songs/index.vue > snapshot test > renders song info 1`] = `
 <section
@@ -239,7 +239,7 @@ exports[`pages/songs/index.vue > snapshot test > renders song info 1`] = `
                 
                 <a
                   class="button is-small"
-                  style="background-color: mediumblue; color: rgb(255, 255, 255);"
+                  style="background-color: mediumblue; color: #fff;"
                 >
                   <span
                     title="Dance Dance Revolution 2nd ReMIX"
@@ -307,7 +307,7 @@ exports[`pages/songs/index.vue > snapshot test > renders song info 1`] = `
                 
                 <a
                   class="button is-small"
-                  style="background-color: darkviolet; color: rgb(255, 255, 255);"
+                  style="background-color: darkviolet; color: #fff;"
                 >
                   <span
                     title="Dance Dance Revolution (JP)"
@@ -317,7 +317,7 @@ exports[`pages/songs/index.vue > snapshot test > renders song info 1`] = `
                 </a>
                 <a
                   class="button is-small"
-                  style="background-color: mediumblue; color: rgb(255, 255, 255);"
+                  style="background-color: mediumblue; color: #fff;"
                 >
                   <span
                     title="Dance Dance Revolution 2nd ReMIX"

nuxt.config.ts

@@ -62,8 +62,5 @@ export default defineNuxtConfig({
   build: {
     transpile: [/@oruga-ui\/oruga-next/],
   },
-  modules: [
-    // Doc: https://content.nuxtjs.org/
-    '@nuxt/content',
-  ],
+  modules: ['@nuxt/content', 'nuxt-vitest'],
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "consumer-ddr",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "Consumer DDR Song List",
   "author": "ddradar",
   "private": true,
@@ -30,20 +30,20 @@
     "@nuxt/content": "^2.5.2",
     "@nuxt/eslint-config": "^0.1.1",
     "@types/js-yaml": "^4.0.5",
-    "@vitest/coverage-c8": "^0.29.2",
-    "@vue/test-utils": "^2.2.10",
+    "@vitest/coverage-c8": "^0.29.7",
+    "@vue/test-utils": "^2.3.2",
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "js-yaml": "^4.1.0",
-    "jsdom": "^21.1.0",
     "npm-run-all2": "^6.0.4",
-    "nuxt": "^3.2.3",
+    "nuxt": "^3.3.1",
+    "nuxt-vitest": "^0.6.9",
     "prettier": "^2.8.4",
     "sass": "^1.58.3",
     "typescript": "^4.9.5",
-    "vitest": "^0.29.2",
+    "vitest": "^0.29.7",
     "vue-tsc": "^1.2.0"
   },
   "resolutions": {

vitest.config.ts

@@ -1,31 +1,8 @@
-import fs from 'node:fs'
-import { resolve } from 'node:path'
+import { defineVitestConfig } from 'nuxt-vitest/config'
 
-import Vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vitest/config'
-
-const NuxtTsConfig = fs.readFileSync('./.nuxt/tsconfig.json').toString()
-const tsConfigFormated = JSON.parse(
-  NuxtTsConfig.replace(
-    /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
-    (m, g) => (g ? '' : m)
-  )
-)
-
-const alias: Record<string, string> = {}
-
-Object.entries(
-  tsConfigFormated.compilerOptions.paths as Record<string, string[]>
-).forEach(([key, value]) => {
-  alias[key] = resolve(__dirname, value[0])
-})
-
-export default defineConfig({
-  plugins: [Vue()],
-  resolve: { alias },
+export default defineVitestConfig({
   test: {
-    environment: 'jsdom',
-    setupFiles: ['./__tests__/stubWindow.ts', './__tests__/stubGlobal.ts'],
+    environment: 'nuxt',
     coverage: {
       all: true,
       reporter: ['json', 'text'],