Skip to content

Conversation

@KCMertens
Copy link
Contributor

@KCMertens KCMertens commented Apr 19, 2025

This PR adds support for setData() and shallowMount({initialData: ...}) for components defined using the <script setup> syntax.

To my surprise this isn't supported yet, yet it seems like an important tool, especially when refactoring components from the Options API to the Composition API.

E.g. the following test would fail:

ScriptSetup.vue

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const inc = () => { count.value++ }
</script>

<template>
  <button @click="inc()">{{ count }}</button>
</template>

ScriptSetup.spec.ts

it('updates data on a component using <script setup>', async () => {
	const wrapper = shallowMount(ScriptSetup)
	await wrapper.setData({ count: 20 })
	expect(wrapper.html()).toContain('20')
})

I've added a few tests to the existing setData suite, and everything seems to work as expected.

Note

All variables from a <script setup> / the component's setup() function seem to be placed in a single proxy/object by the Vue compiler/runtime.

This means setData() can technically be used to overwrite everything defined or imported in the setup script/function, not just the refs and reactives.
I don't think there is an easy way to decide what should and should not be allowed to be overwritten, so for now allow everything.

@netlify
Copy link

netlify bot commented Apr 19, 2025

Deploy Preview for vue-test-utils-docs ready!

Name Link
🔨 Latest commit e6104e4
🔍 Latest deploy log https://app.netlify.com/sites/vue-test-utils-docs/deploys/680764e078725b000816376e
😎 Deploy Preview https://deploy-preview-2655--vue-test-utils-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

KCMertens and others added 3 commits April 21, 2025 10:12
…ent projects

We were checking reference equality with the default vue EMPTY_OBJ placeholder, however in the production bundle of test-utils, this was inlined, so in effect there were suddenly two EMPTY_OBJ definitions, and the references would no longer match.
Instead, detect whether the object is frozen, which should always hold for the EMPTY_OBJ, no matter if it's inlined or not
Using setData or providing a data() function for an array property would not work correctly.
@KCMertens KCMertens changed the title Fix setData/data through shallowMount/mount for components using setup() Implement setData()/shallowMount with initialData for components using the Composition API / <script setup> Jun 10, 2025
Copy link
Member

@cexbrayat cexbrayat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution 👍

@cexbrayat cexbrayat merged commit 0e34fc6 into vuejs:main Jun 30, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

None yet

2 participants