mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
docs: setup host property and usage example (#28331)
This commit is contained in:
parent
e2dfdff7dc
commit
44a49f0bc1
@ -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)`
|
||||||
|
Loading…
Reference in New Issue
Block a user