mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-31 15:50:32 +00:00
docs(testing): move modules testing section to module authors guide (#7643)
This commit is contained in:
parent
f82a4b67a3
commit
42c086223f
@ -1,7 +1,8 @@
|
|||||||
# Testing
|
# Testing
|
||||||
|
|
||||||
::alert{icon=👉}
|
::alert{icon=👉}
|
||||||
Test utils are still in development and the API and behavior may change. Currently, it's for module authors to preview but not yet ready for testing production apps.
|
Test utils are still in development and the API and behavior may change. Currently, it is in preview stage but not yet ready for testing production apps.
|
||||||
|
If you are a module author, you can find more specific informations in the [Module Author's guide](/guide/going-further/modules#testing)
|
||||||
::
|
::
|
||||||
|
|
||||||
In Nuxt 3, we have a rewritten version of `@nuxt/test-utils` available as `@nuxt/test-utils-edge`. We support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io/) as the test runner.
|
In Nuxt 3, we have a rewritten version of `@nuxt/test-utils` available as `@nuxt/test-utils-edge`. We support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io/) as the test runner.
|
||||||
@ -140,54 +141,6 @@ const pageUrl = url('/page')
|
|||||||
// 'http://localhost:6840/page'
|
// 'http://localhost:6840/page'
|
||||||
```
|
```
|
||||||
|
|
||||||
## Testing Modules
|
|
||||||
|
|
||||||
### Fixture Setup
|
|
||||||
|
|
||||||
To test the modules we create, we could set up some Nuxt apps as fixtures and test their behaviors. For example, we can create a simple Nuxt app under `./test/fixture` with the configuration like:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// nuxt.config.js
|
|
||||||
import MyModule from '../../src'
|
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
|
||||||
modules: [
|
|
||||||
MyModule
|
|
||||||
]
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### Tests Setup
|
|
||||||
|
|
||||||
We can create a test file and use the `rootDir` to test the fixture.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// basic.test.js
|
|
||||||
import { describe, it, expect } from 'vitest'
|
|
||||||
import { fileURLToPath } from 'node:url'
|
|
||||||
import { setup, $fetch } from '@nuxt/test-utils-edge'
|
|
||||||
|
|
||||||
describe('ssr', async () => {
|
|
||||||
await setup({
|
|
||||||
rootDir: fileURLToPath(new URL('./fixture', import.meta.url)),
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders the index page', async () => {
|
|
||||||
// Get response to a server-rendered page with `$fetch`.
|
|
||||||
const html = await $fetch('/')
|
|
||||||
|
|
||||||
expect(html).toContain('<a>A Link</a>')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
For more usage, please refer to our [tests for Nuxt 3 framework](https://github.com/nuxt/framework/blob/main/test/basic.test.ts).
|
|
||||||
|
|
||||||
## Mock utils
|
|
||||||
|
|
||||||
* `mockFn()`: Returns a mocked function based on test runner.
|
|
||||||
* `mockLogger()`: Mocks logger using [`consola.mockTypes`](https://github.com/unjs/consola#mocktypes) and `mockFn()`. Returns an object of mocked logger types.
|
|
||||||
|
|
||||||
## Testing in a Browser
|
## Testing in a Browser
|
||||||
|
|
||||||
::alert{icon=🚧}
|
::alert{icon=🚧}
|
||||||
|
@ -178,7 +178,51 @@ If you have an already published and working module and want to transfer it to n
|
|||||||
|
|
||||||
### `@nuxt/test-utils`
|
### `@nuxt/test-utils`
|
||||||
|
|
||||||
Nuxt 3 has a testing library for testing Nuxt apps and modules. You can check out [testing modules](/getting-started/testing#testing-modules) for more information and examples.
|
#### Fixture Setup
|
||||||
|
|
||||||
|
To test the modules we create, we could set up some Nuxt apps as fixtures and test their behaviors. For example, we can create a simple Nuxt app under `./test/fixture` with the configuration like:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// nuxt.config.js
|
||||||
|
import MyModule from '../../src'
|
||||||
|
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
modules: [
|
||||||
|
MyModule
|
||||||
|
]
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Tests Setup
|
||||||
|
|
||||||
|
We can create a test file and use the `rootDir` to test the fixture.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// basic.test.js
|
||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
import { setup, $fetch } from '@nuxt/test-utils-edge'
|
||||||
|
|
||||||
|
describe('ssr', async () => {
|
||||||
|
await setup({
|
||||||
|
rootDir: fileURLToPath(new URL('./fixture', import.meta.url)),
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders the index page', async () => {
|
||||||
|
// Get response to a server-rendered page with `$fetch`.
|
||||||
|
const html = await $fetch('/')
|
||||||
|
|
||||||
|
expect(html).toContain('<a>A Link</a>')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
For more usage, please refer to our [tests for Nuxt 3 framework](https://github.com/nuxt/framework/blob/main/test/basic.test.ts).
|
||||||
|
|
||||||
|
### Mock utils
|
||||||
|
|
||||||
|
- `mockFn()`: Returns a mocked function based on test runner.
|
||||||
|
- `mockLogger()`: Mocks logger using [`consola.mockTypes`](https://github.com/unjs/consola#mocktypes) and `mockFn()`. Returns an object of mocked logger types.
|
||||||
|
|
||||||
### Testing Externally
|
### Testing Externally
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user