Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

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

Merged
merged 2 commits into from Sep 20, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
51 changes: 2 additions & 49 deletions docs/content/1.getting-started/9.testing.md
@@ -1,7 +1,8 @@
# Testing

::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.
Expand Down Expand Up @@ -140,54 +141,6 @@ const pageUrl = url('/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

::alert{icon=🚧}
Expand Down
46 changes: 45 additions & 1 deletion docs/content/2.guide/4.going-further/3.modules.md
Expand Up @@ -178,7 +178,51 @@ If you have an already published and working module and want to transfer it to n

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

Expand Down