-
Notifications
You must be signed in to change notification settings - Fork 97
Description
Describe the bug
The mountSuspended
function doesn't work correctly with components that use Options API along with async setup(). When using a Ref variable (returned from setup) inside computed properties, the test fails with a timeout error. Specifically, trying to call string methods (like slice()
) on the Ref variable directly causes the issue, as the Ref is not automatically unwrapped in computed properties.
Steps to reproduce in the example:
https://stackblitz.com/~/github.com/RokeAlvo/mountSuspended-async-setup
<template>
<div>
<h1>{{ compMsg }}</h1>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'VTest',
setup() {
const msg = ref("Hello World")
return {
msg,
}
},
computed: {
compMsg() {
return this.msg.slice(0, 5) // error there
}
}
})
</script>
import VTest from './VTest.vue'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { describe, it, expect } from 'vitest'
describe('VTest', () => {
it('renders a message', async () => {
const wrapper = await mountSuspended(VTest)
expect(wrapper.text()).toContain('Hello')
})
})
Expected behavior
Both testing approaches should work correctly. The Ref from setup should be automatically unwrapped when accessed in computed properties, allowing string methods to be called directly.
Related information:
@nuxt/test-utils: 3.17.2
nuxt: 3.16.1
vue: 3.5.13
vitest: 3.0.8
@vue/test-utils: 2.4.6
Additional context
The same component works correctly when tested with regular mount + Suspense approach, suggesting this is specifically an issue with mountSuspended handling of Refs in Options API components.