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 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: ` +
+ +
+ ` + }) + + 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() {