fix: Make wrapper.find() enable to find ref in v-for directive (#1723)

src/baseWrapper.ts

@@ -75,7 +75,12 @@ export default abstract class BaseWrapper<ElementType extends Node>
         return createWrapperError('DOMWrapper')
       }
 
-      const result = currentComponent.refs[selector.ref]
+      let result = currentComponent.refs[selector.ref]
+
+      // When using ref inside v-for, then refs contains array of component instances and nodes
+      if (Array.isArray(result)) {
+        result = result.length ? result[0] : undefined
+      }
 
       if (result instanceof Node) {
         return createDOMWrapper(result)

tests/find.spec.ts

@@ -41,6 +41,22 @@ describe('find', () => {
       expect(wrapper.find({ ref: 'plain' }).element).toBeInstanceOf(Text)
     })
 
+    it('works when ref is in v-for directive', () => {
+      const Component = defineComponent({
+        template: `
+          <div v-for="item in ['foo', 'bar']" :key="item">
+            <span :ref="\`span-\${item}\`" class="my-span" />
+          </div>
+        `
+      })
+
+      const wrapper = mount(Component)
+      expect(wrapper.find({ ref: 'span-foo' }).exists()).toBe(true)
+      expect(wrapper.find({ ref: 'span-foo' }).attributes('class')).toBe(
+        'my-span'
+      )
+    })
+
     it('does not find ref located in the same component but not in current DOM wrapper', () => {
       const Component = defineComponent({
         render() {