From 51c94bf2d9e6c6c58aa2b59560359335350a5c1b Mon Sep 17 00:00:00 2001
From: Hiroki Shimizu <elsewhere2424@gmail.com>
Date: Wed, 17 Aug 2022 07:24:20 +0900
Subject: [PATCH] fix: Make wrapper.find() enable to find ref in v-for
 directive

---
 src/baseWrapper.ts |  7 ++++++-
 tests/find.spec.ts | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts
index 0a1f0e462..662941fe2 100644
--- a/src/baseWrapper.ts
+++ b/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)
diff --git a/tests/find.spec.ts b/tests/find.spec.ts
index 3ec839e52..8df8b7d4a 100644
--- a/tests/find.spec.ts
+++ b/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() {