FindComponent returns WrapperLike with css selector

[frisch-raphael]

I'm trying to use findComponent with a css selector.
However, when I try to use trigger on it, it says that trigger does not exist.
Is there something I'm missing ?

Here's my package.json:

  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "axios": "^0.21.4",
    "core-js": "^3.6.5",
    "qrcode": "^1.5.0",
    "quasar": "^2.0.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^3.0.0",
    "@quasar/quasar-app-extension-testing": "^2.0.1",
    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.0-beta.8",
    "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.7",
    "@types/faker": "^5.5.9",
    "@types/jest": "^26.0.14",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^4.16.1",
    "@typescript-eslint/parser": "^4.16.1",
    "babel-jest": "^26.5.6",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-jest": "^25.2.2",
    "eslint-plugin-vue": "^7.0.0",
    "faker": "^5.5.3",
    "jest": "^26.5.6",
    "ts-jest": "^26.5.6",
    "typescript": "^4.3.5",
    "vue-jest": "^5.0.0-alpha.10"
  },

[freakzlike]

I think this has been recently fixed by #1180 but currently not released

[freakzlike]

@frisch-raphael can you test this again with rc.19?

[yakobe]

I am having this problem in rc.20

[freakzlike]

@yakobe You facing the same type error with trigger or are you calling another method? It would be good, if you provide some code snippet.

I will add some info to the docs, about the WrapperLike type

[yakobe]

@freakzlike here is a contrived example:

const btn = page.findComponent('#save')
expect(btn.props().disabled).toBe(true)

Which will throw

error TS2339: Property 'props' does not exist on type 'WrapperLike'.

[freakzlike]

This is exactly the case I added to the docs. See the warning box: WrapperLike type when using CSS selector
https://test-utils.vuejs.org/guide/advanced/component-instance.html#usage-with-getcomponent-and-findcomponent

I will close this issue, since the initial bug has already been fixed.

[yakobe]

Yep, sorry I hadn't had a chance to check those new docs and just wanted to provide the example you requested.

Really like the possibility of typing the exact component with typeof. Even better than it was before, great stuff thanks 👍. I have, however, run into a problem when there are two script tags in the component (needed when using the setup script together with inheritAttrs: false). For some reason it throws an type error. I will try to provide a better example ASAP. In this situation I could just use the DefinedComponent type but it felt so nice to use the real one and it gives the reader more insight.

[freakzlike]

Can you try to move the <script> after the <script setup>? I'm not sure if this helps, but if I remember correctly I once had the same issue.