docs(testing): move modules testing section to module authors guide (#7643)

This commit is contained in:
Clément Ollivier 2022-09-20 11:12:08 +02:00 committed by GitHub
parent f82a4b67a3
commit 42c086223f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 50 deletions

View File

@ -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=🚧}

View File

@ -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