docs: setup host property and usage example (#28331)

This commit is contained in:
Adam DeHaven 2024-08-01 09:58:33 -04:00 committed by GitHub
parent e2dfdff7dc
commit 44a49f0bc1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 11 deletions

View File

@ -414,16 +414,16 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
::code-group ::code-group
```bash [yarn] ```bash [yarn]
yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
``` ```
```bash [npm] ```bash [npm]
npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
``` ```
```bash [pnpm] ```bash [pnpm]
pnpm add -D vitest @vue/test-utils happy-dom @vitejs/plugin-vue pnpm add -D vitest @vue/test-utils happy-dom @vitejs/plugin-vue
``` ```
```bash [bun] ```bash [bun]
bun add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue bun add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
``` ```
:: ::
@ -432,7 +432,7 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
```ts twoslash ```ts twoslash
import { defineConfig } from 'vitest/config' import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
test: { test: {
@ -465,9 +465,9 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
```ts twoslash ```ts twoslash
import { describe, it, expect } from 'vitest' import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue' import HelloWorld from './HelloWorld.vue'
describe('HelloWorld', () => { describe('HelloWorld', () => {
it('component renders Hello world properly', () => { it('component renders Hello world properly', () => {
const wrapper = mount(HelloWorld) const wrapper = mount(HelloWorld)
@ -544,17 +544,22 @@ Please use the options below for the `setup` method.
#### Features #### Features
- `build`: Whether to run a separate build step.
- Type: `boolean`
- Default: `true` (`false` if `browser` or `server` is disabled, or if a `host` is provided)
- `server`: Whether to launch a server to respond to requests in the test suite. - `server`: Whether to launch a server to respond to requests in the test suite.
- Type: `boolean` - Type: `boolean`
- Default: `true` - Default: `true` (`false` if a `host` is provided)
- `port`: If provided, set the launched test server port to the value. - `port`: If provided, set the launched test server port to the value.
- Type: `number | undefined` - Type: `number | undefined`
- Default: `undefined` - Default: `undefined`
- `build`: Whether to run a separate build step. - `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](#target-host-end-to-end-example).
- Type: `boolean` - Type: `string`
- Default: `true` (`false` if `browser` or `server` is disabled) - Default: `undefined`
- `browser`: Under the hood, Nuxt test utils uses [`playwright`](https://playwright.dev) to carry out browser testing. If this option is set, a browser will be launched and can be controlled in the subsequent test suite. - `browser`: Under the hood, Nuxt test utils uses [`playwright`](https://playwright.dev) to carry out browser testing. If this option is set, a browser will be launched and can be controlled in the subsequent test suite.
- Type: `boolean` - Type: `boolean`
- Default: `false` - Default: `false`
@ -566,6 +571,31 @@ Please use the options below for the `setup` method.
- Type: `'vitest' | 'jest' | 'cucumber'` - Type: `'vitest' | 'jest' | 'cucumber'`
- Default: `'vitest'` - Default: `'vitest'`
##### Target `host` end-to-end example
A common use-case for end-to-end testing is running the tests against a deployed application running in the same environment typically used for Production.
For local development or automated deploy pipelines, testing against a separate local server can be more efficient and is typically faster than allowing the test framework to rebuild between tests.
To utilize a separate target host for end-to-end tests, simply provide the `host` property of the `setup` function with the desired URL.
```ts twoslash
import { setup, createPage } from '@nuxt/test-utils/e2e'
import { describe, it, expect } from 'vitest'
describe('login page', async () => {
await setup({
host: 'http://localhost:8787',
})
it('displays the email and password fields', async () => {
const page = await createPage('/login')
expect(await page.getByTestId('email').isVisible()).toBe(true)
expect(await page.getByTestId('password').isVisible()).toBe(true)
})
})
```
### APIs ### APIs
#### `$fetch(url)` #### `$fetch(url)`