Vue test utils: '[object Object]' is not a valid selector

Question

I'm trying to get an element by its ref attribute from the wrapper, but it is throwing an error shown below.

According to the documentation, my usage of find seems to be correct.

 SyntaxError: '[object Object]' is not a valid selector

  13 |     const lis = wrapper.findAll('li');
  14 | 
> 15 |     const a = wrapper.find({ ref: 'first' });
     |                       ^
  16 | 
  17 |     console.log(a);
  18 | 

  at emit (node_modules/nwsapi/src/nwsapi.js:565:17)
  at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1513:9)
  at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1424:14)      at VueWrapper.find (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:192      at Object.it (tests/unit/example.spec.js:15:23)

Answer 1

That usage of find is deprecated according to the current find docs:

Deprecation warning

Using find to search for a Component is deprecated and will be removed. Use findComponent instead.

And it looks like that support is completely removed now. find currently only accepts a selector string.

To find a component by ref name, use findComponent instead:

wrapper.findComponent({ ref: 'first' })

Answer 2

You can get your ref value by this.$refs.first

Answer 3

Support for find is removed in Vue Test Utils 1 (for Vue2): vue2_find_docs.

Vue Test Utils 2 (for Vue3) specifies that find should be used for HTML elements while findComponent should be used for Vue components: vue3_find_docs.

Make sure that you are referencing the correct documentation for your Vue version and that you have the correct vue-test-utils package installed.