Skip to content

Commit

Permalink
test: add example of mocking nuxt useRoute
Browse files Browse the repository at this point in the history
  • Loading branch information
danielroe committed Jan 28, 2024
1 parent e293cea commit fe46519
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 3 deletions.
4 changes: 3 additions & 1 deletion examples/app-vitest-full/pages/router/route.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { useRoute as useNuxtRoute } from '#imports'
const route = useRoute()
const nuxtRoute = useNuxtRoute()
</script>

<template>
<div>Index page, path: {{ route.path }}</div>
<div>Index page, path: {{ route.path }}, {{ nuxtRoute.path }}</div>
</template>
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Index > should render correctly 1`] = `"<div>Index page, path: /123</div>"`;
exports[`Index > should render correctly 1`] = `"<div>Index page, path: /123, /bob</div>"`;
8 changes: 7 additions & 1 deletion examples/app-vitest-full/tests/nuxt/mock-vue-router.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { describe, expect, it, vi } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import Index from '~/pages/router/route.vue'

vi.mock('vue-router', () => ({
Expand All @@ -10,6 +10,12 @@ vi.mock('vue-router', () => ({
})),
}))

mockNuxtImport('useRoute', () => () => ({
meta: {},
path: '/bob',
query: {},
}))

describe('Index', async () => {
const wrapper = await mountSuspended(Index)

Expand Down

0 comments on commit fe46519

Please sign in to comment.