test: add `vitest-environment-nuxt` (#1186)

composables/idb/index.ts

@@ -3,6 +3,8 @@ import type { Ref } from 'vue'
 import { del, get, set, update } from 'idb-keyval'
 import type { UseIDBOptions } from '@vueuse/integrations/useIDBKeyval'
 
+const isIDBSupported = !process.test && typeof indexedDB !== 'undefined'
+
 export async function useAsyncIDBKeyval<T>(
   key: IDBValidKey,
   initialValue: MaybeComputedRef<T>,
@@ -22,6 +24,8 @@ export async function useAsyncIDBKeyval<T>(
   const rawInit: T = resolveUnref(initialValue)
 
   async function read() {
+    if (!isIDBSupported)
+      return
     try {
       const rawValue = await get<T>(key)
       if (rawValue === undefined) {
@@ -40,6 +44,8 @@ export async function useAsyncIDBKeyval<T>(
   await read()
 
   async function write() {
+    if (!isIDBSupported)
+      return
     try {
       if (data.value == null) {
         await del(key)

composables/masto/statusDrafts.ts

@@ -4,7 +4,7 @@ import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Draft, DraftMap } from '~/types'
 import type { Mutable } from '~/types/utils'
 
-export const currentUserDrafts = process.server ? computed<DraftMap>(() => ({})) : useUserLocalStorage<DraftMap>(STORAGE_KEY_DRAFTS, () => ({}))
+export const currentUserDrafts = process.server || process.test ? computed<DraftMap>(() => ({})) : useUserLocalStorage<DraftMap>(STORAGE_KEY_DRAFTS, () => ({}))
 
 export const builtinDraftKeys = [
   'dialog',

composables/users.ts

@@ -289,7 +289,7 @@ interface UseUserLocalStorageCache {
  * Create reactive storage for the current user
  */
 export function useUserLocalStorage<T extends object>(key: string, initial: () => T): Ref<T> {
-  if (process.server)
+  if (process.server || process.test)
     return shallowRef(initial())
 
   // @ts-expect-error bind value to the function

nuxt.config.ts

@@ -66,6 +66,7 @@ export default defineNuxtConfig({
     define: {
       'process.env.VSCODE_TEXTMATE_DEBUG': 'false',
       'process.mock': ((!isCI || isPreview) && process.env.MOCK_USER) || 'false',
+      'process.test': 'false',
     },
     build: {
       target: 'esnext',

package.json

@@ -114,6 +114,7 @@
     "vite-plugin-inspect": "^0.7.14",
     "vite-plugin-pwa": "^0.14.1",
     "vitest": "^0.27.0",
+    "vitest-environment-nuxt": "0.4.0",
     "vue-tsc": "^1.0.24",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"

pages/[[server]]/@[account]/[status].vue

@@ -5,7 +5,7 @@ definePageMeta({
   name: 'status',
   key: route => route.path,
   // GoToSocial
-  alias: ['/:server/@:account/statuses/:status'],
+  alias: ['/:server?/@:account/statuses/:status'],
 })
 
 const route = useRoute()

pnpm-lock.yaml

@@ -118,6 +118,7 @@ importers:
       vite-plugin-inspect: ^0.7.14
       vite-plugin-pwa: ^0.14.1
       vitest: ^0.27.0
+      vitest-environment-nuxt: 0.4.0
       vue-advanced-cropper: ^2.8.6
       vue-tsc: ^1.0.24
       vue-virtual-scroller: 2.0.0-beta.7
@@ -209,8 +210,9 @@ importers:
       unplugin-auto-import: 0.12.1_@vueuse+core@9.10.0
       unplugin-vue-inspector: 0.0.2
       vite-plugin-inspect: 0.7.14
-      vite-plugin-pwa: 0.14.1_tz3vz2xt4jvid2diblkpydcyn4
+      vite-plugin-pwa: 0.14.1
       vitest: 0.27.0_jsdom@21.0.0
+      vitest-environment-nuxt: 0.4.0_vitest@0.27.0
       vue-tsc: 1.0.24_typescript@4.9.4
       workbox-build: 6.5.4
       workbox-window: 6.5.4
@@ -4048,6 +4050,12 @@ packages:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
     dev: true
 
+  /@vue/test-utils/2.2.7:
+    resolution: {integrity: sha512-BMuoruUFTEqhLoOgsMcgNVMiByYbfHCKGr2C4CPdGtz/affUtDVX5zr1RnPuq0tYSiaqq+Enw5voUpG6JY8Q7g==}
+    peerDependencies:
+      vue: ^3.0.1
+    dev: true
+
   /@vueuse/core/8.9.4:
     resolution: {integrity: sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==}
     peerDependencies:
@@ -5164,6 +5172,10 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /css.escape/1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    dev: true
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -6913,6 +6925,19 @@ packages:
       ufo: 1.0.1
     dev: true
 
+  /happy-dom/8.1.4:
+    resolution: {integrity: sha512-mUCzXHhSO6fOQlZwKW6z2f/+rYavKNxNrgY4nJ4dp+r8gTGbTENgMZGfM6eJD0DJPRFF8DFyngXdBF93wF96UA==}
+    dependencies:
+      css.escape: 1.5.1
+      he: 1.2.0
+      node-fetch: 2.6.8
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /has-bigints/1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
@@ -8846,7 +8871,6 @@ packages:
         optional: true
     dependencies:
       whatwg-url: 5.0.0
-    dev: false
 
   /node-fetch/3.3.0:
     resolution: {integrity: sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==}
@@ -12046,12 +12070,10 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa/0.14.1_tz3vz2xt4jvid2diblkpydcyn4:
+  /vite-plugin-pwa/0.14.1:
     resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0
-      workbox-build: ^6.5.4
-      workbox-window: ^6.5.4
     dependencies:
       '@rollup/plugin-replace': 5.0.2_rollup@3.9.1
       debug: 4.3.4
@@ -12061,6 +12083,7 @@ packages:
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
+      - '@types/babel__core'
       - supports-color
     dev: true
 
@@ -12149,6 +12172,27 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vitest-environment-nuxt/0.4.0_vitest@0.27.0:
+    resolution: {integrity: sha512-uRg/jvgHjzUGhkWTWtFEUlImfA3VScZG2EGlRvQk9ODspUw0a9hTz9Yz9tXQTsChoE2n7yi44TJdCVmK7iHxUA==}
+    peerDependencies:
+      vitest: ^0.24.5 || ^0.26.0 || ^0.27.0
+      vue: ^3.2.45
+    dependencies:
+      '@nuxt/kit': 3.0.0
+      '@vue/test-utils': 2.2.7
+      estree-walker: 3.0.2
+      h3: 1.0.2
+      happy-dom: 8.1.4
+      magic-string: 0.27.0
+      ofetch: 1.0.0
+      unenv: 1.0.1
+      vitest: 0.27.0_jsdom@21.0.0
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+    dev: true
+
   /vitest/0.27.0_jsdom@21.0.0:
     resolution: {integrity: sha512-BnOa7T6CnXVC6UgcAsvFOZ2Dtvqkt+/Nl6CRgh4qVT70vElf65XwEL6zMRyTF+h2QXJziEkxYdrLo5WCxckMLQ==}
     engines: {node: '>=v14.16.0'}

shims.d.ts

@@ -1,3 +1,13 @@
 /// <reference types="@types/wicg-file-system-access" />
 /// <reference types="vite-plugin-pwa/info" />
 /// <reference types="vite-plugin-pwa/client" />
+
+declare global {
+  namespace NodeJS {
+    interface Process {
+      test?: boolean
+    }
+  }
+}
+
+export {}

tests/content-rich.test.ts

@@ -1,6 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
 /* eslint-disable vue/one-component-per-file */
 import { describe, expect, it, vi } from 'vitest'
 import { renderToString } from 'vue/server-renderer'
@@ -202,10 +199,6 @@ vi.mock('vue-router', () => {
   }
 })
 
-vi.mock('~/composables/dialog.ts', () => {
-  return {}
-})
-
 vi.mock('shiki-es', async (importOriginal) => {
   const mod = await importOriginal()
   return {

tests/html-parse.test.ts

@@ -1,11 +1,7 @@
-/**
- * @vitest-environment jsdom
- */
 import type { mastodon } from 'masto'
 import { describe, expect, it } from 'vitest'
 import { format } from 'prettier'
 import { render as renderTree } from 'ultrahtml'
-import { parseMastodonHTML, treeToText } from '~/composables/content-parse'
 
 describe('html-parse', () => {
   it('empty', async () => {

tests/html-to-text.test.ts

@@ -1,8 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
 import { describe, expect, it } from 'vitest'
-import { htmlToText } from '~/composables/content-parse'
 
 describe('html-to-text', () => {
   it('inline code', () => {
@@ -13,11 +9,11 @@ describe('html-to-text', () => {
   it('code block', () => {
     expect(htmlToText('<p>text </p><pre><code class="language-js">code</code></pre>'))
       .toMatchInlineSnapshot(`
-        "text 
-        \`\`\`js
-        code
-        \`\`\`"
-      `)
+      "text 
+      \`\`\`js
+      code
+      \`\`\`"
+    `)
   })
 
   it('bold & italic', () => {

tests/language.test.ts

@@ -1,5 +1,4 @@
 import { describe, expect, it } from 'vitest'
-import { matchLanguages } from '../utils/language'
 
 describe('language', () => {
   it('match language', () => {

tests/reorder-timeline.test.ts

@@ -1,9 +1,5 @@
-/**
- * @vitest-environment jsdom
- */
 import type { mastodon } from 'masto'
 import { describe, expect, it } from 'vitest'
-import { reorderedTimeline } from '~/composables/timeline'
 
 function status(id: string): mastodon.v1.Status {
   return { id } as mastodon.v1.Status

vitest.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfigWithNuxtEnv } from 'vitest-environment-nuxt/config'
+
+export default defineConfigWithNuxtEnv({
+  define: {
+    'process.test': 'true',
+  },
+})

vitest.config.ts

@@ -1,31 +0,0 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vitest/config'
-import Vue from '@vitejs/plugin-vue'
-import AutoImport from 'unplugin-auto-import/vite'
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      '~/': `${resolve(__dirname)}/`,
-    },
-  },
-  define: {
-    'process.server': 'false',
-    'process.client': 'true',
-  },
-  plugins: [
-    Vue({
-      reactivityTransform: true,
-    }),
-    AutoImport({
-      dts: false,
-      imports: [
-        'vue',
-        '@vueuse/core',
-      ],
-      dirs: [
-        'composables',
-      ],
-    }),
-  ],
-})