-
Notifications
You must be signed in to change notification settings - Fork 112
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.6Additional 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.