You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Note: `baseURL` in unit test](#note-baseurl-in-unit-test)
27
+
-[E2E Tests](#e2e-tests)
28
+
-[Note: `$fetch` and `fetch` in `@nuxt/test-utils/e2e`](#note-fetch-and-fetch-in-nuxttest-utilse2e)
29
+
-[Nuxt Layer](#nuxt-layer)
30
+
-[nuxt layer and unit test](#nuxt-layer-and-unit-test)
31
+
-[Contribution](#contribution)
32
+
15
33
34
+
## Features
16
35
<!-- Highlight some of the features your module provide here -->
17
36
- 🌲 Write once, use everywhere
18
37
- 🚀 Use MSW powerful mocking features in Nuxt development
19
38
- ⛰ Intercept both server-side and client-side request, including `$fetch`, `useFetch` and any other api requests.
20
39
- 🥧 Support Nuxt layer.
21
40
41
+
## Migrate: `0.x` -> `1.x` users
42
+
Thank you to all the users of version 0.x. I believe you won’t need to put in too much effort to upgrade to version 1.x.
43
+
44
+
The differences between 0.x and 1.x are as follows:
45
+
46
+
optionPath in nuxt.config has been changed to folderPath. Originally, it pointed to a file, but now it points to a folder.
47
+
The settings for worker and server were previously written in the same file. To better utilize the environments they run in, worker and server will now run in separate files. Please refer to the instructions below.
48
+
Added support for unit testing in the Nuxt environment.
49
+
Added support for Nuxt layers.
22
50
23
51
## Setup
24
52
To install the module to your Nuxt application:
@@ -43,6 +71,11 @@ The setup location is in the `~/msw` directory (by default), and you configure i
43
71
### worker
44
72
To set up the worker, you need follow the [MSW documentation](https://mswjs.io/docs/integrations/browser#generating-the-worker-script) to create a worker file.
45
73
74
+
```sh
75
+
# For example
76
+
npx msw init public --save
77
+
```
78
+
46
79
Next, you need to create a `worker.{ts|js|mjs|cjs}` file in the `~/msw` directory. The worker file will be run in the Nuxt client plugin, which in browser context. Means you can use browser api and Nuxt composable in this file.
// Module will setup worker when nuxt run client plugin
73
106
// Means this function will be called after plugin call worker.start()
74
107
75
-
// nuxtApp.hook('app:mounted', () => {
76
-
// console.log(worker.listHandlers())
77
-
// })
108
+
nuxtApp.hook('app:mounted', () => {
109
+
// const route = useRoute()
110
+
// console.log(worker.listHandlers())
111
+
})
78
112
},
79
113
80
114
}
@@ -100,14 +134,18 @@ The way to set up the server is similar to the worker. You need to create a `ser
100
134
101
135
The server file will be run in Node.js `Nitro` context. Because it is before NuxtApp created, you can not access NuxtApp and composable which access it. But you can access msw server and request (h3Event).
102
136
103
-
One more important thing is that you need to set `baseURL` in the server option if you are using `$fetch` or `useFetch` with no `baseURL` set, and use path with no domain like `/some/path`. The baseURL must be same as your server listening address.
137
+
One more important thing is that, for your mock and nitro server handler work properly, you need to set `baseURL` in the server option. The baseURL must be same as your server listening address.
138
+
139
+
And, when mocking the server side request, you need include the baseURL in your handler's path.
104
140
```ts
105
141
// ~/msw/server.ts
106
142
import { http, HttpResponse } from'msw'
107
143
108
144
exportdefaultdefineNuxtMswServerOption(() => {
109
145
// assume your server listening at http://localhost:3000
110
-
const baseURL ="http://localhost:3000"// or use useRuntimeConfig() to get your baseURL setting
146
+
const baseURL ="http://localhost:3000"
147
+
148
+
// composables that not related to NuxtApp can be used here, like: useRuntimeConfig
expect(component.find('#name').text()).toBe('msw server unit')
303
341
})
304
342
```
343
+
344
+
Then you can run the test with `vitest`:
345
+
346
+
```bash
347
+
npx vitest
348
+
```
349
+
305
350
##### Note: `baseURL` in unit test
306
351
If you are using `$fetch` or `useFetch` with no `baseURL` set, and use path with no domain like `/some/path`. You can mock like following:
307
352
@@ -311,17 +356,18 @@ await useFetch('/api/user')
311
356
312
357
// mock with baseURL
313
358
const baseURL ='http://localhost:3000'
314
-
setupNuxtMswServer({
359
+
awaitsetupNuxtMswServer({
315
360
baseURL,
316
361
handlers: [
317
362
http.get(baseURL+'/api/user', () => {
318
363
returnHttpResponse.json({ name: 'msw server unit' })
319
364
})
320
365
]
321
366
})
322
-
323
367
```
324
368
369
+
> [!NOTE]`baseURL` here is just a valid domain, it is not necessary to match nuxt server address. But if you run a real server and want msw fallback to there, you need to set baseURL to the real server address.
370
+
325
371
326
372
#### E2E Tests
327
373
`@nuxt/test-utils` uses Playwright as the E2E test driver, and it actually runs the Nuxt server and browser in a separate process. This means we can't directly modify mock in test.
0 commit comments