Skip to content

Commit

Permalink
Improve testing component examples to avoid auto import misunderstanding
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelmcandrew committed May 9, 2024
1 parent 416d76a commit 5496448
Showing 1 changed file with 13 additions and 10 deletions.
23 changes: 13 additions & 10 deletions docs/1.getting-started/11.testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut---
// tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
const component = await mountSuspended(SomeComponent)
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
it('can also mount an app', async () => {
const component = await mountSuspended(App, { route: '/test' })
Expand All @@ -199,13 +206,11 @@ The passed in component will be rendered inside a `<div id="test-wrapper"></div>
Examples:

```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut---
// tests/components/SomeComponents.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
import { screen } from '@testing-library/vue'

it('can render some component', async () => {
Expand All @@ -215,13 +220,11 @@ it('can render some component', async () => {
```

```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut---
// tests/App.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime'
import App from '@/app.vue'

it('can also render an app', async () => {
const html = await renderSuspended(App, { route: '/test' })
Expand Down

0 comments on commit 5496448

Please sign in to comment.