setData() on a writable computed property does not seem to work as it does in VTU.1 about test-utils HOT 9 CLOSED

Oh that's interesting, thanks for the trick @renatodeleao ! 👍

I'll close the issue then, as I think that the two possible workarounds are good enough.
If someone wants to dig into setData and open a PR, they are more than welcome to of course!

from test-utils.

Hi @nsakiya-incomm

Can you provide us a small repro online (as minimal as possible to reproduce the issue, ideally without vuteify, the store and axios) using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

from test-utils.

Thanks, @cexbrayat .
Here is the sample codes, based on your template. I'm new to stackblitz.
https://stackblitz.com/edit/github-dbkkwg?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

from test-utils.

Thanks for the repro.

setData is probably not as well supported as it was in VTU v1, as nowadays most people use the composition API (and then can't use setData in their tests).

So in your case, if you prefer using the Options API, I would not use setData in the test, but use await wrapper.get('input').setValue("Overridden!!!") which solves the issue (and is closer to what your user would do).

Would that be an acceptable workaround for you?

from test-utils.

Hi @cexbrayat ,

I chose to use text field input to simplify the sample. The actual application is using v-autocomplete component from Vuetify, which is a little more complicated than that. I cannot directly invoke setValue(). There might be the way, but not without going into their implementation level, which probably make the tests fragile to Vuetify implementation. We cannot go back to VTU1 because of Vue3 migration. Do you have other alternatives?

Unfortunately, we had lot of codes in Option API from Vue 2, as well as tests using setData(). We're afraid that moving to Composition API would limit us from testing as thorough as what we have today.

Thank you.

from test-utils.

I understand. In my opinion, you'll have an easier time testing if you use the composition API (as you can see setData is a bit rough).

If you want to take a look and try to open a PR to fix this issue, it would be great. We would gladly review and merge it!

from test-utils.

HI @cexbrayat ,
I'm new to this PR process. So, I open a PR and fix the issue by myself? I haven't thought about that. Can you guide me where to find setData() implementation in the source codes. I can give it a shot w/o knowing what I'm getting into. :)
Thanks

from test-utils.

@nsakiya-incomm You can start by adding a minimal unit test to reproduce the issue here https://github.com/vuejs/test-utils/blob/main/tests/setData.spec.ts

then setData is defined in https://github.com/vuejs/test-utils/blob/main/src/vueWrapper.ts#L242, and you'll need to check what's going on 👍 Thanks for your help!

from test-utils.

@nsakiya-incomm Way late to the party, but also had my share of setData when doing a big migration so I was compeled to leave this comment.
What was suggested is the way to go, you should test the way users interact with your components. So whenever you see a wrapper.vm around your spider sense should warn you: these are implementation details. The name of data/computed properties are implementation details that can be changed without changing the output — and thus breaking the test.

Now back to the subject:

cannot directly invoke setValue(). There might be the way, but not without going into their implementation level,

.setValue has a second argument prop that allows use to basically v-model on components. So on your case all you need to do is:

    const inputComponent = wrapper.findComponent({ name: 'HelloWorldChild' });
    await inputComponent.setValue('Overridden!!!', 'modelValue'); // the trick

Since it's a vuetify wrapper, you can even stub it to hide its internal details, but not strictly necessary. Here's a demo with the test passing.

https://stackblitz.com/edit/github-dbkkwg-vdtfvm?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

Cheers, hope you've made it!

from test-utils.