- 
+
-
+
- 
+
Hello world
+ + ``` + +5. Create a simple unit test for this newly created component `~/components/HelloWorld.spec.ts` + + ```ts twoslash + import { describe, it, expect } from 'vitest' + import { mount } from '@vue/test-utils' + + import HelloWorld from './HelloWorld.vue' + + describe('HelloWorld', () => { + it('component renders Hello world properly', () => { + const wrapper = mount(HelloWorld) + expect(wrapper.text()).toContain('Hello world') + }) + }) + ``` + +6. Run vitest command + + ::package-managers + ```bash [npm] + npm run test + ``` + ```bash [yarn] + yarn test + ``` + ```bash [pnpm] + pnpm run test + ``` + ```bash [bun] + bun run test + ``` + :: + +Congratulations, you're all set to start unit testing with `@vue/test-utils` in Nuxt! Happy testing! + ## End-To-End Testing -For end-to-end testing, we support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io) as test runners. +For end-to-end testing, we support [Vitest](https://github.com/vitest-dev/vitest), [Jest](https://jestjs.io), [Cucumber](https://cucumber.io/) and [Playwright](https://playwright.dev/) as test runners. ### Setup @@ -436,17 +553,22 @@ Please use the options below for the `setup` method. #### 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. - Type: `boolean` - - Default: `true` + - Default: `true` (`false` if a `host` is provided) - `port`: If provided, set the launched test server port to the value. - Type: `number | undefined` - Default: `undefined` -- `build`: Whether to run a separate build step. - - Type: `boolean` - - Default: `true` (`false` if `browser` or `server` is disabled) +- `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: `string` + - 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. - Type: `boolean` - Default: `false` @@ -455,9 +577,34 @@ Please use the options below for the `setup` method. - `type`: The type of browser to launch - either `chromium`, `firefox` or `webkit` - `launch`: `object` of options that will be passed to playwright when launching the browser. See [full API reference](https://playwright.dev/docs/api/class-browsertype#browser-type-launch). - `runner`: Specify the runner for the test suite. Currently, [Vitest](https://vitest.dev) is recommended. - - Type: `'vitest' | 'jest'` + - Type: `'vitest' | 'jest' | 'cucumber'` - 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 +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 #### `$fetch(url)` @@ -494,11 +641,11 @@ const pageUrl = url('/page') ### Testing in a Browser -We provide built-in support using Playwright within `@nuxt/test-utils`, but you can also use other test runners for end-to-end browser testing. +We provide built-in support using Playwright within `@nuxt/test-utils`, either programmatically or via the Playwright test runner. #### `createPage(url)` -You can create a configured Playwright browser instance, and (optionally) point it at a path from the running server. You can find out more about the API methods available from [in the Playwright documentation](https://playwright.dev/docs/api/class-page). +Within `vitest`, `jest` or `cucumber`, you can create a configured Playwright browser instance with `createPage`, and (optionally) point it at a path from the running server. You can find out more about the API methods available from [in the Playwright documentation](https://playwright.dev/docs/api/class-page). ```ts twoslash import { createPage } from '@nuxt/test-utils/e2e' @@ -506,3 +653,70 @@ import { createPage } from '@nuxt/test-utils/e2e' const page = await createPage('/page') // you can access all the Playwright APIs from the `page` variable ``` + +#### Testing with Playwright Test Runner + +We also provide first-class support for testing Nuxt within [the Playwright test runner](https://playwright.dev/docs/intro). + +::package-managers +```bash [npm] +npm i --save-dev @playwright/test @nuxt/test-utils +``` +```bash [yarn] +yarn add --dev @playwright/test @nuxt/test-utils +``` +```bash [pnpm] +pnpm add -D @playwright/test @nuxt/test-utils +``` +```bash [bun] +bun add --dev @playwright/test @nuxt/test-utils +``` +:: + +You can provide global Nuxt configuration, with the same configuration details as the `setup()` function mentioned earlier in this section. + +```ts [playwright.config.ts] +import { fileURLToPath } from 'node:url' +import { defineConfig, devices } from '@playwright/test' +import type { ConfigOptions } from '@nuxt/test-utils/playwright' + +export default defineConfig{{ data }}
- +{{ date }}
+{{ date }}