test: adding example tests for NuxtUI

examples/nuxt-ui/.gitignore

@@ -0,0 +1 @@
+.data/content/*

examples/nuxt-ui/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <UApp>
+    <div data-testid="page-content">
+      This is within a UApp component.
+    </div>
+  </UApp>
+</template>

examples/nuxt-ui/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

examples/nuxt-ui/components/SomeComponent.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    This component has a dependency on Nuxt UI.
+    <UButton
+      variant="solid"
+      color="primary"
+    >
+      Click me
+    </UButton>
+  </div>
+</template>

examples/nuxt-ui/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
+  compatibilityDate: '2024-04-03',
+})

examples/nuxt-ui/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-app-vitest-nuxt-ui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "dev:prepare": "nuxt prepare",
+    "generate": "nuxt generate",
+    "test": "pnpm test:nuxt-environment && pnpm test:browser",
+    "test:browser": "VITEST_BROWSER_ENABLED=true vitest run",
+    "test:browser:dev": "VITEST_BROWSER_ENABLED=true vitest",
+    "test:nuxt-environment": "vitest run",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxt/test-utils": "latest",
+    "@nuxt/ui": "3.3.2",
+    "@vitest/browser": "3.2.4",
+    "nuxt": "4.0.3",
+    "tailwindcss": "^4.1.12",
+    "vitest": "3.2.4",
+    "vitest-browser-vue": "1.1.0"
+  }
+}

examples/nuxt-ui/tests/browser/index.spec.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { render } from 'vitest-browser-vue'
+import App from '~/app.vue'
+
+describe('App', () => {
+  it('works with mountSuspended', async () => {
+    const component = await mountSuspended(App)
+    expect(component.html()).toMatchInlineSnapshot(`
+      "<div data-testid="page-content"> This is within a UApp component. </div>
+      <!--teleport start-->
+      <!--teleport end-->"
+    `)
+  })
+
+  it('works with vitest-browser-vue', () => {
+    const { getByText } = render(App)
+    expect(getByText('This is within a UApp component')).toBeInTheDocument()
+  })
+})

examples/nuxt-ui/tests/browser/mount.spec.ts

@@ -0,0 +1,8 @@
+import { expect, it } from 'vitest'
+import { render } from 'vitest-browser-vue'
+import SomeComponent from '~/components/SomeComponent.vue'
+
+it('should render any component', () => {
+  const { getByText } = render(SomeComponent)
+  expect(getByText('This component has a dependency on Nuxt UI.')).toBeInTheDocument()
+})

examples/nuxt-ui/tests/index.spec.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+import App from '~/app.vue'
+
+describe('test utils', () => {
+  it('can mount components within nuxt suspense', async () => {
+    const component = await mountSuspended(App)
+    expect(component.html()).toContain('<div data-testid="page-content"> This is within a UApp component. </div>')
+  })
+})

examples/nuxt-ui/tests/mount.spec.ts

@@ -0,0 +1,8 @@
+import { expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import SomeComponent from '~/components/SomeComponent.vue'
+
+it('should render any component', async () => {
+  const component = await mountSuspended(SomeComponent)
+  expect(component.html()).toContain('This component has a dependency on Nuxt UI.')
+})

examples/nuxt-ui/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

examples/nuxt-ui/vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+const browserConfig = {
+  browser: {
+    enabled: true,
+    provider: 'playwright',
+    instances: [{ browser: 'chromium' }],
+  },
+  environment: 'nuxt',
+  include: ['tests/browser/**/*.spec.ts'],
+  setupFiles: ['vitest-browser-vue'],
+}
+
+const defaultConfig = {
+  environment: 'nuxt',
+  exclude: ['tests/browser/**/*.spec.ts', 'node_modules/**', 'dist/**', '.data/**'],
+}
+
+export default defineVitestConfig({
+  test: process.env.VITEST_BROWSER_ENABLED === 'true' ? browserConfig : defaultConfig,
+})

package.json

@@ -185,10 +185,14 @@
   "packageManager": "pnpm@10.15.0",
   "pnpm": {
     "onlyBuiltDependencies": [
+      "@tailwindcss/oxide",
       "better-sqlite3"
     ],
     "ignoredBuiltDependencies": [
-      "esbuild"
+      "esbuild",
+      "oxc-resolver",
+      "unrs-resolver",
+      "vue-demi"
     ]
   }
 }