Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve testing component examples (#27138)

Browse Source
This commit is contained in:
Michael McAndrew 2024-05-11 11:00:32 +02:00 committed by GitHub
parent 452604f512
commit f465e4d7eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/1.getting-started/11.testing.md
View File

@ -160,21 +160,28 @@ export default defineVitestConfig({
`mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example: `mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example:
```ts twoslash ```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest' import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut--- // ---cut---
// tests/components/SomeComponents.nuxt.spec.ts // tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime' import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
it('can mount some component', async () => { it('can mount some component', async () => {
const component = await mountSuspended(SomeComponent) const component = await mountSuspended(SomeComponent)
expect(component.text()).toMatchInlineSnapshot( expect(component.text()).toMatchInlineSnapshot(
'This is an auto-imported component' '"This is an auto-imported component"'
) )
}) })
```
```ts twoslash
import { it, expect } from 'vitest'
// ---cut---
// tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime'
import App from '~/app.vue'
// tests/App.nuxt.spec.ts // tests/App.nuxt.spec.ts
it('can also mount an app', async () => { it('can also mount an app', async () => {
const component = await mountSuspended(App, { route: '/test' }) const component = await mountSuspended(App, { route: '/test' })
@ -199,13 +206,11 @@ The passed in component will be rendered inside a `<div id="test-wrapper"></div>
Examples: Examples:
```ts twoslash ```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest' import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut--- // ---cut---
// tests/components/SomeComponents.nuxt.spec.ts // tests/components/SomeComponents.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime' import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
import { screen } from '@testing-library/vue' import { screen } from '@testing-library/vue'
it('can render some component', async () => { it('can render some component', async () => {
@ -215,13 +220,11 @@ it('can render some component', async () => {
``` ```
```ts twoslash ```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest' import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut--- // ---cut---
// tests/App.nuxt.spec.ts // tests/App.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime' import { renderSuspended } from '@nuxt/test-utils/runtime'
import App from '~/app.vue'
it('can also render an app', async () => { it('can also render an app', async () => {
const html = await renderSuspended(App, { route: '/test' }) const html = await renderSuspended(App, { route: '/test' })