The page that I'm trying to write unit tests about is as follows:
<script setup lang="ts">
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue'
import { useRoute } from 'vue-router'
const apiKey = useRuntimeConfig().public.builderIOAPIKey as string
const model = 'page'
const route = useRoute()
const { data: content } = await useAsyncData(`builderData-page-${route.path}`, () => fetchOneEntry({
model,
apiKey,
userAttributes: { urlPath: route.path },
}))
</script>
<template>
<div id="page">
<div
v-if="content || isPreviewing()"
class="w-full flex items-center justify-center"
>
<h1 class="typography-display-3 d-md:typography-display-2 d-lg:typography-display-1">
{{ (content?.data?.title) || 'Unpublished' }}
</h1>
<Content
:model="model"
:content="content"
:api-key="apiKey"
/>
</div>
</div>
</template>
Now, one of the test cases that I'm writing is as follows:
it('renders published content when content exists', async () => {
(fetchOneEntry as any).mockResolvedValue({ data: { title: 'Test Title' } });
(isPreviewing as any).mockReturnValue(false)
const wrapper = mount(LandingPage)
await flushPromises()
const heading = wrapper.find('h1')
expect(heading.exists()).toBe(true)
expect(heading.text()).toBe('Test Title')
const contentComponent = wrapper.findComponent(Content)
expect(contentComponent.exists()).toBe(true)
expect(contentComponent.props()).toEqual({
model: 'page',
content: { data: { title: 'Test Title' } },
apiKey: 'test-api-key',
})
expect(fetchOneEntry).toHaveBeenCalledWith({
model: 'page',
apiKey: 'test-api-key',
userAttributes: { urlPath: '/test-path' },
})
})
When mounting the wrapper it returns no HTML, because of the useRuntimeConfig and useAsyncData not being available at the time when running the tests.
I've tried mocking these with globalThis.useRuntimeConfig & globalThis.useAsyncData, using vi.mock and mockNuxtImport but couldn't get it working.
How is the correct way to mock these two composables?