Skip to content

Using find({ref: '...'}) to target an Element logs a deprecation warning #1931

Open
@alecgibson

Description

@alecgibson

Subject of the issue

Trying to find an Element by its ref gives a deprecation warning.

Steps to reproduce

Consider this component:

<template>
  <div>
    <div ref="child" />
  </div>
</template>

If I want to find the "child" element, I'd like to be able to write:

wrapper.find({ref: 'child'})

However, if I do this, then I get a deprecation warning, because my selector isn't a DOM_SELECTOR (it's a REF_SELECTOR).

On the other hand, if I do what the deprecation warning suggests and use findComponent(), then the test fails, because findAllComponents() filters for isVueWrapper, which fails for an Element.

Expected behaviour

I should be able to use find({ref: ''}) to target an Element without a deprecation warning, or use findComponent({ref: ''}), as suggested.

Actual behaviour

I get deprecation errors in my tests.

Possible Solution

The obvious workaround is to not use a ref to target the Element, but it's not ideal, since a ref is a nice, syntactic non-style-based way of targeting an element for testing, which aligns with Vue's own syntax (as opposed to adding eg a data-test attribute or similar).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions