From 0855ea7625c4651a21891f24ab272e951f2a3a9a Mon Sep 17 00:00:00 2001
From: Alexandros Kazantzidis <alexandroskaza23@gmail.com>
Date: Fri, 19 Apr 2024 17:16:00 +0300
Subject: [PATCH] docs: add `@vue/test-utils` getting started guide (#26205)

---
 docs/1.getting-started/11.testing.md | 103 +++++++++++++++++++++++++--
 1 file changed, 96 insertions(+), 7 deletions(-)

diff --git a/docs/1.getting-started/11.testing.md b/docs/1.getting-started/11.testing.md
index 111f7e8bc5..8fb1bf24b3 100644
--- a/docs/1.getting-started/11.testing.md
+++ b/docs/1.getting-started/11.testing.md
@@ -60,7 +60,7 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
    ```
 
 ::tip
-When importing `@nuxt/test-utils` in your vitest config, It is necessary to have `type: "module"` specified in your `package.json` or rename your vitest config file appropriatly.
+When importing `@nuxt/test-utils` in your vitest config, It is necessary to have `"type": "module"` specified in your `package.json` or rename your vitest config file appropriatly.
 > ie. `vitest.config.m{ts,js}`.
 ::
 
@@ -342,8 +342,8 @@ For example, to mock `/test/` endpoint, you can do:
 ```ts twoslash
 import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
-registerEndpoint("/test/", () => ({
-  test: "test-field"
+registerEndpoint('/test/', () => ({
+  test: 'test-field'
 }))
 ```
 
@@ -352,9 +352,9 @@ By default, your request will be made using the `GET` method. You may use anothe
 ```ts twoslash
 import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
-registerEndpoint("/test/", {
-  method: "POST",
-  handler: () => ({ test: "test-field" })
+registerEndpoint('/test/', {
+  method: 'POST',
+  handler: () => ({ test: 'test-field' })
 })
 ```
 
@@ -369,7 +369,7 @@ If you would like to use both the end-to-end and unit testing functionality of `
 `app.nuxt.spec.ts`
 
 ```ts twoslash
-import { mockNuxtImport } from "@nuxt/test-utils/runtime"
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
 mockNuxtImport('useStorage', () => {
   return () => {
@@ -391,6 +391,95 @@ await setup({
 // ...
 ```
 
+### Using `@vue/test-utils`
+
+If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and you are only testing components which do not rely on Nuxt composables, auto-imports or context, you can follow these steps to set it up.
+
+1. Install the needed dependencies
+
+   ::code-group
+   ```bash [yarn]
+   yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue 
+   ```
+   ```bash [npm]
+   npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue 
+   ```
+   ```bash [pnpm]
+   pnpm add -D vitest @vue/test-utils happy-dom @vitejs/plugin-vue 
+   ```
+   ```bash [bun]
+   bun add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue 
+   ```
+   ::
+
+2. Create a `vitest.config.ts` with the following content:
+
+   ```ts twoslash
+   import { defineConfig } from 'vite'
+   import vue from '@vitejs/plugin-vue'
+ 
+   export default defineConfig({
+     plugins: [vue()],
+     test: {
+       environment: 'happy-dom',
+     },
+   });
+   ```
+
+3. Add a new command for test in your `package.json`
+
+   ```json
+   "scripts": {
+     "build": "nuxt build",
+     "dev": "nuxt dev",
+     ...
+     "test": "vitest"
+   },
+   ```
+
+4. Create a simple `<HelloWorld>` component `components/HelloWorld.vue` with the following content:
+
+   ```vue
+   <template>
+     <p>Hello world</p>
+   </template>
+   ```
+
+5. Create a simple unit test for this newly created component `~/components/HelloWorld.spec.ts`
+
+   ```ts twoslash
+   import { describe, it, expect } from 'vitest'
+   import { mount } from '@vue/test-utils'
+ 
+   import HelloWorld from './HelloWorld.vue'
+ 
+   describe('HelloWorld', () => {
+     it('component renders Hello world properly', () => {
+       const wrapper = mount(HelloWorld)
+       expect(wrapper.text()).toContain('Hello world')
+     })
+   })
+   ```
+
+6. Run vitest command
+
+   ::code-group
+   ```bash [yarn]
+   yarn test
+   ```
+   ```bash [npm]
+   npm run test
+   ```
+   ```bash [pnpm]
+   pnpm run test
+   ```
+   ```bash [bun]
+   bun run test
+   ```
+   ::
+
+Congratulations, you're all set to start unit testing with `@vue/test-utils` in Nuxt! Happy testing!
+
 ## End-To-End Testing
 
 For end-to-end testing, we support [Vitest](https://github.com/vitest-dev/vitest), [Jest](https://jestjs.io), [Cucumber](https://cucumber.io/) and [Playwright](https://playwright.dev/) as test runners.