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

Commit

Permalink
docs(testing): move modules testing section to module authors guide (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
clemcode committed Sep 20, 2022
1 parent f82a4b6 commit 42c0862
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 50 deletions.
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

0 comments on commit 42c0862

Please sign in to comment.