test: add browser mode tests for nuxt/content components

examples/content/components/ComponentWithProse.vue

@@ -0,0 +1,11 @@
+<template>
+  <ProseH3>{{ heading }}</ProseH3>
+  <ProseP>{{ content }}</ProseP>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  heading: string
+  content: string
+}>()
+</script>

examples/content/components/ComponentWithUseRuntimeConfig.vue

@@ -0,0 +1,8 @@
+<template>
+  <h1>Use Runtime Config</h1>
+  <pre>{{ config }}</pre>
+</template>
+
+<script lang="ts" setup>
+const config = useRuntimeConfig()
+</script>

examples/content/components/SomeComponent.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This is an auto-imported component</div>
+</template>

examples/content/package.json

@@ -1,18 +1,23 @@
 {
+  "name": "example-app-vitest-content",
   "private": true,
   "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "dev:prepare": "nuxt prepare",
     "generate": "nuxt generate",
-    "test": "vitest run",
+    "test": "pnpm test:nuxt-environment && pnpm test:browser",
+    "test:browser": "VITEST_BROWSER_ENABLED=true vitest run",
+    "test:nuxt-environment": "vitest run",
     "preview": "nuxt preview"
   },
   "devDependencies": {
     "@nuxt/content": "3.5.1",
     "@nuxt/test-utils": "latest",
+    "@vitest/browser": "3.1.3",
     "nuxt": "3.17.3",
-    "vitest": "3.1.3"
+    "vitest": "3.1.3",
+    "vitest-browser-vue": "0.2.0"
   }
 }

examples/content/tests/browser/index.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+import { render } from 'vitest-browser-vue'
+import App from '~/app.vue'
+
+// Example usage: queryCollection(pages).path('/').first()
+mockNuxtImport('queryCollection', () => (_id: string) => ({
+  path: (_path: string) => ({
+    first: () => ({
+      title: 'My page',
+    }),
+  }),
+}))
+
+describe('App', () => {
+  it('works with mountSuspended', async () => {
+    const component = await mountSuspended(App)
+    expect(component.html()).toMatchInlineSnapshot(`
+      "<div>Index page</div>
+      <div>title: My page</div>"
+    `)
+  })
+
+  // TODO: render does not currently support <Suspense>
+  it.skip('works with vitest-browser-vue', () => {
+    const { getByText } = render(App)
+    expect(getByText('Index page')).toBeInTheDocument()
+    expect(getByText('title: My page')).toBeInTheDocument()
+  })
+})

examples/content/tests/browser/mount.spec.ts

@@ -0,0 +1,31 @@
+import { expect, it } from 'vitest'
+import { render } from 'vitest-browser-vue'
+import { SomeComponent, ProseH3, ProseP, ComponentWithUseRuntimeConfig, ComponentWithProse } from '#components'
+
+it('should render any component', () => {
+  const { getByText } = render(SomeComponent)
+  expect(getByText('This is an auto-imported component')).toBeInTheDocument()
+})
+
+it('should render a ProseP component', () => {
+  const { getByText } = render(ProseP, { slots: { default: 'This is a Prose Paragraph component' } })
+  expect(getByText('This is a Prose Paragraph component')).toBeInTheDocument()
+})
+
+it('should render a ProseH3 component', () => {
+  const { getByText } = render(ProseH3, { slots: { default: 'This is a Prose heading component' } })
+  expect(getByText('This is a Prose heading component')).toBeInTheDocument()
+})
+
+it('should render a ComponentWithUseRuntimeConfig component', () => {
+  const { getByText } = render(ComponentWithUseRuntimeConfig)
+  expect(getByText('Use Runtime Config')).toBeInTheDocument()
+})
+
+it('should render a ComponentWithProse component', () => {
+  const headingText = 'Text rendered within ProseH3'
+  const paragraphText = 'Text rendered within paragraph'
+  const { getByText } = render(ComponentWithProse, { props: { heading: headingText, content: paragraphText } })
+  expect(getByText(headingText)).toBeInTheDocument()
+  expect(getByText(paragraphText)).toBeInTheDocument()
+})

examples/content/tests/mount.spec.ts

@@ -0,0 +1,33 @@
+import { expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { ComponentWithUseRuntimeConfig, ComponentWithProse, SomeComponent, ProseH3, ProseP } from '#components'
+
+it('should render any component', async () => {
+  const component = await mountSuspended(SomeComponent)
+  expect(component.html()).toContain('This is an auto-imported component')
+})
+
+it('should render a ProseH3 component', async () => {
+  const headingText = 'This is a Prose Heading component'
+  const component = await mountSuspended(ProseH3, { slots: { default: headingText } })
+  expect(component.html()).toContain(headingText)
+})
+
+it('should render a ProseP component', async () => {
+  const paragraphText = 'This is a Prose Paragraph component'
+  const component = await mountSuspended(ProseP, { slots: { default: paragraphText } })
+  expect(component.html()).toContain(paragraphText)
+})
+
+it('should render a ComponentWithUseRuntimeConfig component', async () => {
+  const component = await mountSuspended(ComponentWithUseRuntimeConfig)
+  expect(component.html()).toContain('Use Runtime Config')
+})
+
+it('should render a ComponentWithProse component', async () => {
+  const headingText = 'Text rendered within ProseH3'
+  const paragraphText = 'Text rendered within p'
+  const component = await mountSuspended(ComponentWithProse, { props: { heading: headingText, content: paragraphText } })
+  expect(component.html()).toContain(headingText)
+  expect(component.html()).toContain(paragraphText)
+})

examples/content/vitest.config.ts

@@ -1,7 +1,21 @@
 import { defineVitestConfig } from '@nuxt/test-utils/config'
 
-export default defineVitestConfig({
-  test: {
-    environment: 'nuxt',
+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,
 })