@nuxt/docs 4.1.2 → 4.2.0

package/1.getting-started/17.testing.md

@@ -5,7 +5,7 @@ navigation.icon: i-lucide-circle-check
 ---
 
 ::tip
-If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing).
+If you are a module author, you can find more specific information in the [Module Author's guide](/docs/4.x/guide/going-further/modules#testing).
 ::
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
@@ -46,8 +46,8 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
    ```ts twoslash
    export default defineNuxtConfig({
      modules: [
-       '@nuxt/test-utils/module'
-     ]
+       '@nuxt/test-utils/module',
+     ],
    })
    ```
 
@@ -115,7 +115,7 @@ export default defineVitestConfig({
     //     }
     //   }
     // }
-  }
+  },
 })
 ```
 
@@ -199,10 +199,10 @@ export default defineVitestConfig({
         mock: {
           intersectionObserver: true,
           indexedDb: true,
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -222,8 +222,9 @@ For example:
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 import type { Component } from 'vue'
+
 declare module '#components' {
   export const SomeComponent: Component
 }
@@ -233,17 +234,16 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { SomeComponent } from '#components'
 
 it('can mount some component', async () => {
-    const component = await mountSuspended(SomeComponent)
-    expect(component.text()).toMatchInlineSnapshot(
-        '"This is an auto-imported component"'
-    )
+  const component = await mountSuspended(SomeComponent)
+  expect(component.text()).toMatchInlineSnapshot(
+    '"This is an auto-imported component"',
+  )
 })
-
 ```
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 // ---cut---
 // tests/components/SomeComponents.nuxt.spec.ts
 import { mountSuspended } from '@nuxt/test-utils/runtime'
@@ -251,8 +251,8 @@ import App from '~/app.vue'
 
 // tests/App.nuxt.spec.ts
 it('can also mount an app', async () => {
-    const component = await mountSuspended(App, { route: '/test' })
-    expect(component.html()).toMatchInlineSnapshot(`
+  const component = await mountSuspended(App, { route: '/test' })
+  expect(component.html()).toMatchInlineSnapshot(`
       "<div>This is an auto-imported component</div>
       <div> I am a global component </div>
       <div>/</div>
@@ -275,8 +275,9 @@ Examples:
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 import type { Component } from 'vue'
+
 declare module '#components' {
   export const SomeComponent: Component
 }
@@ -294,7 +295,7 @@ it('can render some component', async () => {
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 // ---cut---
 // tests/App.nuxt.spec.ts
 import { renderSuspended } from '@nuxt/test-utils/runtime'
@@ -341,8 +342,8 @@ import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 const { useStorageMock } = vi.hoisted(() => {
   return {
     useStorageMock: vi.fn(() => {
-      return { value: 'mocked storage'}
-    })
+      return { value: 'mocked storage' }
+    }),
   }
 })
 
@@ -369,20 +370,20 @@ import { mockComponent } from '@nuxt/test-utils/runtime'
 
 mockComponent('MyComponent', {
   props: {
-    value: String
+    value: String,
   },
-  setup(props) {
+  setup (props) {
     // ...
-  }
+  },
 })
 
 // relative path or alias also works
-mockComponent('~/components/my-component.vue', async () => {
+mockComponent('~/components/my-component.vue', () => {
   // or a factory function
   return defineComponent({
-    setup(props) {
+    setup (props) {
       // ...
-    }
+    },
   })
 })
 
@@ -401,10 +402,10 @@ mockComponent('MyComponent', async () => {
   const { ref, h } = await import('vue')
 
   return defineComponent({
-    setup(props) {
+    setup (props) {
       const counter = ref(0)
       return () => h('div', null, counter.value)
-    }
+    },
   })
 })
 ```
@@ -422,7 +423,7 @@ For example, to mock `/test/` endpoint, you can do:
 import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
 registerEndpoint('/test/', () => ({
-  test: 'test-field'
+  test: 'test-field',
 }))
 ```
 
@@ -433,11 +434,11 @@ import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
 registerEndpoint('/test/', {
   method: 'POST',
-  handler: () => ({ test: 'test-field' })
+  handler: () => ({ test: 'test-field' }),
 })
 ```
 
-> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
+> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/4.x/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
 
 #### Conflict with End-To-End Testing
 
@@ -455,13 +456,12 @@ mockNuxtImport('useStorage', () => {
     return { value: 'mocked storage' }
   }
 })
-
 ```
 
 `app.e2e.spec.ts`
 
 ```ts twoslash
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
 
 await setup({
   setupTimeout: 10000,
@@ -502,7 +502,7 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
      test: {
        environment: 'happy-dom',
      },
-   });
+   })
    ```
 
 3. Add a new command for test in your `package.json`
@@ -527,7 +527,7 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
 5. Create a simple unit test for this newly created component `~/components/HelloWorld.spec.ts`
 
    ```ts twoslash
-   import { describe, it, expect } from 'vitest'
+   import { describe, expect, it } from 'vitest'
    import { mount } from '@vue/test-utils'
 
    import HelloWorld from './HelloWorld.vue'
@@ -569,7 +569,7 @@ In each `describe` block where you are taking advantage of the `@nuxt/test-utils
 
 ```ts twoslash [test/my-test.spec.ts]
 import { describe, test } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
 
 describe('My test', async () => {
   await setup({
@@ -624,7 +624,7 @@ Please use the options below for the `setup` method.
   - Type: `number | undefined`
   - Default: `undefined`
 
-- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](#target-host-end-to-end-example).
+- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](/docs/4.x/getting-started/testing#target-host-end-to-end-example).
   - Type: `string`
   - Default: `undefined`
 
@@ -648,8 +648,8 @@ For local development or automated deploy pipelines, testing against a separate
 To utilize a separate target host for end-to-end tests, simply provide the `host` property of the `setup` function with the desired URL.
 
 ```ts
-import { setup, createPage } from '@nuxt/test-utils/e2e'
-import { describe, it, expect } from 'vitest'
+import { createPage, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
 
 describe('login page', async () => {
   await setup({
@@ -742,8 +742,8 @@ import type { ConfigOptions } from '@nuxt/test-utils/playwright'
 export default defineConfig<ConfigOptions>({
   use: {
     nuxt: {
-      rootDir: fileURLToPath(new URL('.', import.meta.url))
-    }
+      rootDir: fileURLToPath(new URL('.', import.meta.url)),
+    },
   },
   // ...
 })
@@ -770,8 +770,8 @@ import { expect, test } from '@nuxt/test-utils/playwright'
 
 test.use({
   nuxt: {
-    rootDir: fileURLToPath(new URL('..', import.meta.url))
-  }
+    rootDir: fileURLToPath(new URL('..', import.meta.url)),
+  },
 })
 
 test('test', async ({ page, goto }) => {