mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: improve testing component examples (#27138)
This commit is contained in:
parent
452604f512
commit
f465e4d7eb
@ -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' })
|
||||||
|
Loading…
Reference in New Issue
Block a user