Skip to content

wrapper.element is not reactive for mountSuspended vs. mount #1091

Open
@sebbayer

Description

Environment


  • Operating System: Linux
  • Node Version: v18.20.3
  • Nuxt Version: 3.15.2
  • CLI Version: 3.20.0
  • Nitro Version: 2.10.4
  • Package Manager: [email protected]
  • Builder: -
  • User Config: devtools, compatibilityDate
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-w4avpzfe?file=test%2FMyComponent.nuxt.test.js

Describe the bug

The wrapper returned by mountSuspended does not update its element property automatically like the wrapper returned by mount. See reproduction link. E.g.

        const wrapper = await mountSuspended(DynamicContent, { props })
        assert.isTrue(wrapper.element.tagName === 'DIV')
        console.log('before', wrapper.element.tagName)
        await wrapper.setProps({ tag: 'ul' })
        console.log('after', wrapper.element.tagName)
        assert.isTrue(wrapper.element.tagName === 'UL')

before DIV
after DIV

If I would use mount it would update

before DIV
after UL

This is my workaround:

    Object.defineProperty(wrapper, 'element', {
        get () {
            return wrapper.findComponent({ name: 'MountSuspendedComponent' }).element
        },
    })

Additional context

No response

Logs

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