Vue 测试工具：'[object Object]' 不是有效的选择器

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

您可以通过this.$refs.first获取您的参考值

Answer 2

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 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.