Here is the code snippet of the component I am currently testing:
<template>
<component :is="content" />
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const content = defineAsyncComponent(() =>
import(`@/pages/${route.params.path}.md`)
)
</script>
I attempted to conduct a test using the following approach:
import { describe, it, beforeAll, vi } from 'vitest'
import { render } from '@testing-library/vue'
import router from '@/router/index'
vi.mock('@/pages/example.md', () => ({ default: 'Markdown' }))
import PageView from '@/views/Page.vue'
describe('PageView', () => {
let wrapper
beforeAll(async () => {
router.push({ name: 'page', params: { path: 'example' } })
await router.isReady()
wrapper = render(PageView, {
global: { plugins: [router] },
})
})
it('display a markdown file according to params', () => {
wrapper.getByText('Markdown')
})
})
Although my component works flawlessly, the test does not render anything as expected.