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' })