TypeError: Cannot read property 'devtoolsRawSetupState' of undefined

[jonsalvas]

Vue Version: 3.2.31
Test-Utils: 2.0.0-rc.18

When upgrading from vue from 3.2.24 to 3.2.25 all our tests fail with the following error:

TypeError: Cannot read property 'devtoolsRawSetupState' of undefined

This is thrown when trying to call .findComponent on a mounted component using ref:
wrapper.findComponent({ref: ".."})

Seems that we were not alone with this issue:
vuejs/vue-test-utils#1962

[cexbrayat]

@jonsalvas Thanks for the report. Can you provide a small reproduction so we can investigate? You can use create-vue to quickly set up a project with Vue Test Utils.

[lmiller1990]

I guess we just need a check around this:

test-utils/src/vueWrapper.ts

Line 57 in f61b8ae

(vm.$ as unknown as { devtoolsRawSetupState: any }).devtoolsRawSetupState

We are on latest Vue here though, which is 3.2.31. I'd love to see a reproduction, too.

[jonsalvas]

Hey, thanks for the fast reply and sorry for the delay, I had some other tasks to do at work. You can find a reproduction project here:
https://github.com/jonsalvas/test-utils-issue1329

I think the key is the v-for here:

<div v-for="value in 3" :key="value">
    <HelloWorld ref="hello" msg="Welcome to Your Vue.js App" />
  </div>

if I remove the v-for it works fine. So I highly assume a newer version of vue causes multiple refs with same name to be handled differently somehow?

[lmiller1990]

Is

<div v-for="value in 3" :key="value">

Even valid? I thought the syntax was v-for="val in {object|array}". Is using a number even documented or valid syntax? What if you make it v-for="val in [1,2,3]"?

[jonsalvas]

The doc says the following are allowed: "Array | Object | number | string | Iterable" (https://vuejs.org/api/built-in-directives.html#v-for). And changing it to [1,2,3] makes no difference.

Anyway, the reproduction project is just a simplified example. In our original code we iterate over arrays of objects to generate multiple options/checkboxes.

[lmiller1990]

Thanks for the repo, will try take a look.

[cexbrayat]

I did not investigate but it looks similar to issues we've seen in vue core
vuejs/core#5118 should fix them upstream (and should be merged and released fairly soon).
I think that before spending too much time on this, we'll wait for this patch and revisit this to see if the issue persists.

[cexbrayat]

@jonsalvas Can you give it a try with VTU 2.0.0-rc.20 and Vue v3.2.32 please? The fix I was talking about landed in Vue core, so it might solve your problem.

[jonsalvas]

@cexbrayat nope, slightly different error, but technically the same:

TypeError: Cannot read properties of undefined (reading 'devtoolsRawSetupState')

[freakzlike]

I was able to reproduce it within our unit tests and created a PR with the fix.

[jonsalvas]

thanks a lot! Any idea when it is going to be released?

[lmiller1990]

thanks a lot! Any idea when it is going to be released?

It's out now! https://github.com/vuejs/test-utils/releases/tag/v2.0.0-rc.21