From 1cd2ebc01cc40cd44ad4aa7f7809e1b412dc3836 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= Date: Mon, 19 Sep 2022 11:50:08 +0200 Subject: [PATCH 1/2] docs(testing): move modules testing section to module authors guide --- docs/content/1.getting-started/9.testing.md | 51 +------------------ .../2.guide/4.going-further/3.modules.md | 46 ++++++++++++++++- 2 files changed, 47 insertions(+), 50 deletions(-) diff --git a/docs/content/1.getting-started/9.testing.md b/docs/content/1.getting-started/9.testing.md index 2fae519c324..cdbe3771eba 100644 --- a/docs/content/1.getting-started/9.testing.md +++ b/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. @@ -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 Link') - }) -}) -``` - -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=🚧} diff --git a/docs/content/2.guide/4.going-further/3.modules.md b/docs/content/2.guide/4.going-further/3.modules.md index 7901dd6516d..9fc80433f7d 100644 --- a/docs/content/2.guide/4.going-further/3.modules.md +++ b/docs/content/2.guide/4.going-further/3.modules.md @@ -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 Link') + }) +}) +``` + +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 From 1deeaa79fca7df2e0e9d3eb45c34d7167d673f88 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Tue, 20 Sep 2022 11:10:42 +0200 Subject: [PATCH 2/2] lint --- docs/content/2.guide/4.going-further/3.modules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/2.guide/4.going-further/3.modules.md b/docs/content/2.guide/4.going-further/3.modules.md index 9fc80433f7d..cbe8daf106b 100644 --- a/docs/content/2.guide/4.going-further/3.modules.md +++ b/docs/content/2.guide/4.going-further/3.modules.md @@ -221,8 +221,8 @@ For more usage, please refer to our [tests for Nuxt 3 framework](https://github. ### 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. +- `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