Bug: ref inside prop gets converted to primitive value on mount

[tkalmar]

Describe the bug
Somehwhere along the way the internal ref of an prop is converted to an simple value. As seen in the reproducer on line 15 the internal ref got converted to an string and is no longer a ref.

To Reproduce
Reproducer

Expected behavior
The ref should stay a ref, and the test completes flawless

Related information:

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 115.84 GB / 125.52 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @vue/test-utils: ^2.3.0 => 2.3.0 
    jest: ^28.1.1 => 28.1.3 
    vue: ^3.2.6 => 3.2.37

Additional Context:

The component works as expected, only test is not working.

[cexbrayat]

Hi @tkalmar

Thanks for the repro, but shouldn't that be <p>{{ msg.msg }}</p>' in the template? There is no message field...

[tkalmar]

Hi @tkalmar

Thanks for the repro, but shouldn't that be <p>{{ msg.msg }}</p>' in the template? There is no message field...

There is a message getter which i would call to hide the inner workings of my wrapper ...

[cexbrayat]

Ha I see. So it works with msg.msg but not with msg.message?

[tkalmar]

That is exactly the problem.

[tkalmar]

inside the getter msg is a simple string so .value is undefined, that is what i get when examining in the test.
Funny sidenote, when i add an toJSON Method:

public toJSON = (): any => ({
    message: this.msg.value
  });

and JSON stringify the prop then the value is working as expected :/ i'm totaly lost

[cexbrayat]

Yeah I think it's related to vuejs/core#3797 : VTU wraps the props into a reactive object to make them reactive (and allows to call setProps), but reactive does not handle getter and setter

I suggest you track the issue there, as I don't think we'll be able to fix it in VTU.

[cexbrayat]

I'll close, as I confirm this is an upstream issue. You'll run into the same problem if you have:

<script setup>
import { ref, reactive } from 'vue'
 
const o = reactive({ a: 1, get b() { 2 } })
</script>

<template>
  <h1>{{ o.a }}</h1> <!-- displays: 1 -->
  <h2>{{ o.b }}</h2><!-- displays nothing -->
</template>

https://sfc.vuejs.org/#eNo9j02OwyAMha9isWkrpaBmGTGV5h5sSETaVMOPsNNZIO5eU6puEO+z37NdxG9K8rk7MQmNS94SATra09WEzaeYCQpktw782IW2p4MKa44eDmw6mAAmLDEgQYSfb8+xgJ3gMsDNEczHE2eM7KsnE7TqUzifBTmf/iw5VgD6frmWAlFaqFUrVp2Onc6djky1+hrFIPqeZ2+TfGAMfElpRvMpoBETvEljvHXTRtyJEk5K4bq0+x8oY74p/sm8B9q8kw79ec7xH13mYCNaRDWhivoCE41oDQ==