@nuxt/docs-nightly 4.0.4-29240003.66afbe0a → 4.0.4-29240007.8e57b033
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/1.getting-started/17.testing.md +17 -66
- package/package.json +1 -1
|
@@ -54,28 +54,10 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
|
|
|
54
54
|
2. Create a `vitest.config.ts` with the following content:
|
|
55
55
|
|
|
56
56
|
```ts twoslash
|
|
57
|
-
import {
|
|
58
|
-
import { defineVitestProject } from '@nuxt/test-utils/config'
|
|
57
|
+
import { defineVitestConfig } from '@nuxt/test-utils/config'
|
|
59
58
|
|
|
60
|
-
export default
|
|
61
|
-
|
|
62
|
-
projects: [
|
|
63
|
-
{
|
|
64
|
-
test: {
|
|
65
|
-
name: 'unit',
|
|
66
|
-
include: ['test/{e2e,unit}/*.{test,spec}.ts'],
|
|
67
|
-
environment: 'node',
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
await defineVitestProject({
|
|
71
|
-
test: {
|
|
72
|
-
name: 'nuxt',
|
|
73
|
-
include: ['test/nuxt/*.{test,spec}.ts'],
|
|
74
|
-
environment: 'nuxt',
|
|
75
|
-
},
|
|
76
|
-
}),
|
|
77
|
-
],
|
|
78
|
-
},
|
|
59
|
+
export default defineVitestConfig({
|
|
60
|
+
// any custom Vitest config you require
|
|
79
61
|
})
|
|
80
62
|
```
|
|
81
63
|
|
|
@@ -90,16 +72,24 @@ It is possible to set environment variables for testing by using the `.env.test`
|
|
|
90
72
|
|
|
91
73
|
### Using a Nuxt Runtime Environment
|
|
92
74
|
|
|
93
|
-
|
|
75
|
+
By default, `@nuxt/test-utils` will not change your default Vitest environment, so you can do fine-grained opt-in and run Nuxt tests together with other unit tests.
|
|
76
|
+
|
|
77
|
+
You can opt in to a Nuxt environment by adding `.nuxt.` to the test file's name (for example, `my-file.nuxt.test.ts` or `my-file.nuxt.spec.ts`) or by adding `@vitest-environment nuxt` as a comment directly in the test file.
|
|
94
78
|
|
|
95
|
-
|
|
96
|
-
-
|
|
79
|
+
```ts twoslash
|
|
80
|
+
// @vitest-environment nuxt
|
|
81
|
+
import { test } from 'vitest'
|
|
97
82
|
|
|
98
|
-
|
|
83
|
+
test('my test', () => {
|
|
84
|
+
// ... test with Nuxt environment!
|
|
85
|
+
})
|
|
86
|
+
```
|
|
99
87
|
|
|
100
|
-
|
|
88
|
+
You can alternatively set `environment: 'nuxt'` in your Vitest configuration to enable the Nuxt environment for **all tests**.
|
|
101
89
|
|
|
102
90
|
```ts twoslash
|
|
91
|
+
// vitest.config.ts
|
|
92
|
+
import { fileURLToPath } from 'node:url'
|
|
103
93
|
import { defineVitestConfig } from '@nuxt/test-utils/config'
|
|
104
94
|
|
|
105
95
|
export default defineVitestConfig({
|
|
@@ -119,7 +109,7 @@ export default defineVitestConfig({
|
|
|
119
109
|
})
|
|
120
110
|
```
|
|
121
111
|
|
|
122
|
-
If you
|
|
112
|
+
If you have set `environment: 'nuxt'` by default, you can then opt _out_ of the [default environment](https://vitest.dev/guide/environment.html#test-environment) per test file as needed.
|
|
123
113
|
|
|
124
114
|
```ts twoslash
|
|
125
115
|
// @vitest-environment node
|
|
@@ -130,45 +120,6 @@ test('my test', () => {
|
|
|
130
120
|
})
|
|
131
121
|
```
|
|
132
122
|
|
|
133
|
-
::warning
|
|
134
|
-
This approach is not recommended as it creates a hybrid environment where Nuxt Vite plugins run but the Nuxt entry and `nuxtApp` are not initialized. This can lead to hard-to-debug errors.
|
|
135
|
-
::
|
|
136
|
-
|
|
137
|
-
### Organizing Your Tests
|
|
138
|
-
|
|
139
|
-
With the project-based setup, you might organize your tests as follows:
|
|
140
|
-
|
|
141
|
-
```bash [Directory structure]
|
|
142
|
-
test/
|
|
143
|
-
├── e2e/
|
|
144
|
-
│ └── ssr.test.ts
|
|
145
|
-
├── nuxt/
|
|
146
|
-
│ ├── components.test.ts
|
|
147
|
-
│ └── composables.test.ts
|
|
148
|
-
├── unit/
|
|
149
|
-
│ └── utils.test.ts
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
You can of course opt for any test structure, but keeping the Nuxt runtime environment separated from Nuxt end-to-end tests is important for test stability.
|
|
153
|
-
|
|
154
|
-
#### Running Tests
|
|
155
|
-
|
|
156
|
-
With the project setup, you can run different test suites:
|
|
157
|
-
|
|
158
|
-
```bash
|
|
159
|
-
# Run all tests
|
|
160
|
-
npx vitest
|
|
161
|
-
|
|
162
|
-
# Run only unit tests
|
|
163
|
-
npx vitest --project unit
|
|
164
|
-
|
|
165
|
-
# Run only Nuxt tests
|
|
166
|
-
npx vitest --project nuxt
|
|
167
|
-
|
|
168
|
-
# Run tests in watch mode
|
|
169
|
-
npx vitest --watch
|
|
170
|
-
```
|
|
171
|
-
|
|
172
123
|
::warning
|
|
173
124
|
When you run your tests within the Nuxt environment, they will be running in a [`happy-dom`](https://github.com/capricorn86/happy-dom) or [`jsdom`](https://github.com/jsdom/jsdom) environment. Before your tests run, a global Nuxt app will be initialized (including, for example, running any plugins or code you've defined in your `app.vue`).
|
|
174
125
|
|