Skip to content

Bug: mountSuspensed with setup function #1205

@RokeAlvo

Description

@RokeAlvo

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions