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 `` component `components/HelloWorld.vue` with the following content: + + ```vue + + ``` + +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.