docs: Conditional Rendering example does not work with Composition API (data() cannot override setup variables) #2741
Description
Documentation Issue: Maybe the Conditional Rendering example incompatible with Composition API
Hi, I’m a beginner in Vue component testing and currently learning Vue Test Utils. While reading the documentation, I encountered an issue that made me unsure whether I misunderstood something or if there’s a problem in the docs.
URL
https://test-utils.vuejs.org/guide/essentials/conditional-rendering.html
Problem
The documentation uses data() in mount() to control the admin value:
Finding Elements
<!-- Nav.vue -->
<script setup>
import { ref } from 'vue'
const admin = ref(false)
</script>
<template>
<nav>
<a id="profile" href="/profile">My Profile</a>
<a v-if="admin" id="admin" href="/admin">Admin</a>
</nav>
</template>Using data
test('renders an admin link', () => {
const wrapper = mount(Nav, {
data() {
return {
admin: true
}
}
})
expect(wrapper.get('#admin').text()).toEqual('Admin')
})However, this example does not pass when using the Composition API version of the component shown above.In my actual test, the <a id="admin"> element is not rendered, and the assertion fails,but this works in Options API because data() merges into the component instance.
I’m not sure if this is an issue with the documentation, a misunderstanding on my part, or something else. I’m having trouble fully understanding the cause. I would appreciate any clarification or guidance.
This is also my first time submitting an issue. I’m not sure if this is correct, and my English is not very good, so I used AI to help me write this. I hope you can understand and I look forward to your reply.