$refs doesn't work when using v-for and destructuring

Version

1.1.1

Reproduction link

https://github.com/adrianosmond/refs-v-for-and-rest-destructuring

Steps to reproduce

The repo above is set up so that running the tests (with npm run test) will fail on the component (src/components/Broken.vue) which combines object rest destructuring, ref=“” and v-for like so:

<li v-for="{key, label, ...toBind} in items" :key="key" ref="listItem">
    <a v-bind="toBind">{{ label }}</a>
</li>

This works fine in Vue itself, as can be seen if you run the project (npm run serve) and open it in your browser on port 8080.

A component (src/components/Working.vue) is also included which is identical except that it doesn’t use rest destructuring inside v-for. The same test then passes for this component.

What is expected?

$refs.listItem should be an array containing 2 <li> elements

What is actually happening?

$refs.listItem is undefined

[lmiller1990]

Nice, seems I won’t need to spend much more time on this. 3.0.7 is a really old build, glad you got it working. New Vue CLI templates ship the latest vue2-jest, so should be good moving forward.

Going to close this one off as solved/wontfix.

[renatodeleao]

@lmiller1990 many thanks for the explanation! You can stop wondering: it works with jest@27 and latest @vue/vue2-jest. I’m sry for not checking basic setup instructions and consequently reviving this thread. Cheers!

// setup that works
{
  "vue": "2.6.14",
-  "vue-jest": "3.0.7",
+  "@vue/vue2-jest": "27.0.0-alpha.4",
  "jest": "27.5.1",
  "babel-jest": "27.5.1"
}