chore: migrate to @nuxt/test-utils alpha (#1133)

* test: update snapshots to remove quotes

* chore: add alpha versions of test-utils

* chore: migrate to new test format

* test: slightly improve typing in suite

* test: improve safety of basic test

test/basic.spec.ts

@@ -1,46 +1,58 @@
 import { describe, expect, it } from 'vitest'
-import module from '../src/module'
+import { defu } from 'defu'
+import { join } from 'pathe'
 import { loadNuxt } from '@nuxt/kit'
-import { join } from 'path'
+import type { NuxtConfig } from '@nuxt/schema'
+import type * as tailwindcss from 'tailwindcss'
+type TWConfig = tailwindcss.Config;
+import type resolveConfig from 'tailwindcss/resolveConfig'
 
-// TODO: fix these anys
-async function getTailwindCSSConfig (overrides: any = {}): Promise<[any, any]> {
-  overrides.modules = [module]
-  overrides.ssr = overrides.ssr ?? false
-  overrides.hooks = overrides.hooks ?? {}
-  return new Promise((resolve) => {
-    overrides.hooks['tailwindcss:resolvedConfig'] = async (config: any) => {
-      resolve([config, nuxt])
-    }
-    const nuxt = loadNuxt({
-      cwd: join(process.cwd(), 'fixtures', 'empty'),
-      dev: false,
-      overrides
-    })
+async function getTailwindCSSConfig (overrides: Partial<NuxtConfig> = {}) {
+  let tailwindConfig: ReturnType<typeof resolveConfig<TWConfig>>
+  const nuxt = await loadNuxt({
+    ready: true,
+    cwd: join(process.cwd(), 'fixtures', 'empty'),
+    dev: false,
+    overrides: defu(overrides, {
+      ssr: false,
+      modules: ['../../src/module'],
+      hooks: {
+        'tailwindcss:resolvedConfig' (config) {
+          tailwindConfig = config
+        }
+      }
+    } satisfies NuxtConfig) as NuxtConfig
   })
+  const nuxtOptions = structuredClone({
+    plugins: nuxt.options.plugins.map(p => typeof p !== 'string' && ({ src: p.src, mode: p.mode })),
+    _requiredModules: nuxt.options._requiredModules,
+    appConfig: nuxt.options.appConfig
+  })
+  await nuxt.close()
+
+  return {
+    nuxtOptions,
+    tailwindConfig
+  }
 }
 
 describe('nuxt', () => {
   it('should add plugins and modules to nuxt', async () => {
-    const [, lnuxt] = await getTailwindCSSConfig()
-    await lnuxt.then((nuxt: { options: { plugins: any; _requiredModules: any; appConfig: { ui: any } }; close: () => void }) => {
-      expect(nuxt.options.plugins).toContainEqual(
-        expect.objectContaining({
-          src: expect.stringContaining('plugins/colors'),
-          mode: 'all'
-        })
-      )
-      expect(nuxt.options._requiredModules).toContain({
-        '@nuxtjs/color-mode': true,
-        '@nuxtjs/tailwindcss': true
+    const { nuxtOptions } = await getTailwindCSSConfig()
+    expect(nuxtOptions.plugins).toContainEqual(
+      expect.objectContaining({
+        src: expect.stringContaining('plugins/colors'),
+        mode: 'all'
       })
-      // default values in appConfig
-      expect(nuxt.options.appConfig.ui).toContain({
-        primary: 'green',
-        gray: 'cool'
-      })
-      // TODO: this should be done inside getTailwindCSSConfig
-      nuxt.close()
+    )
+    expect(nuxtOptions._requiredModules).toMatchObject({
+      '@nuxtjs/color-mode': true,
+      '@nuxtjs/tailwindcss': true
+    })
+    // default values in appConfig
+    expect(nuxtOptions.appConfig.ui).toMatchObject({
+      primary: 'green',
+      gray: 'cool'
     })
   })
 })
@@ -68,7 +80,7 @@ describe('tailwindcss config', () => {
       ['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
     ]
   ])('%s', async (_description, tailwindcss, safelistColors, safelistPatterns) => {
-    const [config, _nuxt] = await getTailwindCSSConfig({
+    const { tailwindConfig } = await getTailwindCSSConfig({
       ui: {
         safelistColors
       },
@@ -105,19 +117,15 @@ describe('tailwindcss config', () => {
         continue
       }
       if (negate) {
-        expect(config.safelist).not.toContainEqual({
+        expect(tailwindConfig.safelist).not.toContainEqual({
           pattern: expect.toBeRegExp(safelistPattern)
         })
       } else {
-        expect(config.safelist).toContainEqual({
+        expect(tailwindConfig.safelist).toContainEqual({
           pattern: expect.toBeRegExp(safelistPattern)
         })
       }
       negate = false
     }
-
-    await _nuxt.then((n: { close: () => void }) => {
-      n.close()
-    })
   })
 })

test/components/component-render.ts

@@ -1,8 +1,8 @@
-import { mountSuspended } from 'nuxt-vitest/utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import path from 'path'
 
 export default async function (nameOrHtml: string, options: any, component: any) {
-  let html
+  let html: string
   const name = path.parse(component.__file).name
   if (options === undefined) {
     const app = {

test/components/elements/__snapshots__/Button.spec.ts.snap

@@ -1,34 +1,34 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders <UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" /> correctly 1`] = `
-"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\"><span class=\\"i-heroicons-pencil-square flex-shrink-0 h-5 w-5\\" aria-hidden=\\"true\\"></span>
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="i-heroicons-pencil-square flex-shrink-0 h-5 w-5" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders basic case correctly 1`] = `
-"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\">
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
   <!--v-if-->label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders black solid correctly 1`] = `
-"<button type=\\"button\\" class=\\"focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center\\">
+"<button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
   <!--v-if-->label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders leading icon correctly 1`] = `
-"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\"><span class=\\"heroicons-check flex-shrink-0 h-5 w-5\\" aria-hidden=\\"true\\"></span>label
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="heroicons-check flex-shrink-0 h-5 w-5" aria-hidden="true"></span>label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders rounded full correctly 1`] = `
-"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\">
+"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
   <!--v-if-->label
   <!--v-if-->
 </button>"

test/components/layout/Skeleton.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import Skeleton from '../../../src/runtime/components/layout/Skeleton.vue'
+import { USkeleton } from '#components'
 import type { TypeOf } from 'zod'
 import ComponentRender from '../component-render'
 
@@ -7,9 +7,8 @@ describe('Skeleton', () => {
   it.each([
     [ 'basic case', { } ],
     [ '<USkeleton class="h-12 w-12" :ui="{ rounded: \'rounded-full\' }" />' ]
-    // @ts-ignore
-  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof Skeleton.props>) => {
-    const html = await ComponentRender(nameOrHtml, options, Skeleton)
+  ])('renders %s correctly', async (nameOrHtml: string, options?: TypeOf<typeof USkeleton.props>) => {
+    const html = await ComponentRender(nameOrHtml, options, USkeleton)
     expect(html).toMatchSnapshot()
   })
 })

test/components/layout/__snapshots__/Skeleton.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class=\\"animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12\\"></div>"`;
+exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12"></div>"`;
 
-exports[`Skeleton > renders basic case correctly 1`] = `"<div class=\\"animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md\\"></div>"`;
+exports[`Skeleton > renders basic case correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md"></div>"`;