Missing Typescript types for vueWrapper after 10.0 migration

[JoostKersjes]

Current behavior

My project was using component testing before v10.

This is the code I'm using to get the Vue wrapper with type hinting.

    cy.get("button")
      .click()
      .get<Cypress.Cypress["vueWrapper"]>("@wrapper")
      .should((wrapper) => {
        expect(wrapper.emitted().click).to.have.length(1);
      });

After the migration, my vue-tsc command spat out these errors all over the place:

error TS2339: Property 'emitted' does not exist on type 'JQuery<VueWrapper<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>>>'.

13         expect(wrapper.emitted().click).to.have.length(1);

I removed the @cypress/vue dependency from my project as instructed by this part of the Migration Guide: https://docs.cypress.io/guides/references/migration-guide#Component-Testing-Changes

This caused the @vue/test-utils package to disappear from my dependency tree.

I have fixed this problem in my project by installing @vue/test-utils in my project, and adding it to my tsconfig.json types.

Desired behavior

The Typescript types from @vue/test-utils should ship with cypress for Vue projects. I don't want to install the dependency just for the Typescript types.

Test code to reproduce

Starting with a clean Typescript + Vue 3 + Cypress 10 setup, you should be able to reproduce this error by including the following in any chain:

.get<Cypress.Cypress["vueWrapper"]>("@wrapper")
.should((wrapper) => {
  expect(wrapper.emitted().click).to.have.length(1);
});

Cypress Version

10.0.2

Other

No response

[lmiller1990]

Thanks for the detailed bug report. I've seen this in a fresh project just now, too, and came to the same conclusion. The problem is we are bundling Test Utils with cypress/vue, as part of the binary (the thing you get when you do npm install cypress which is just a big JS blob - we don't include the types.

I think what we will likely need to do is also generate the types as part of the build step, and stick them here: https://github.com/cypress-io/cypress/tree/develop/cli/types with the other types.

Glad that you found the work around (installing @vue/test-utils). This is definitely not ideal, though, and something we will fix in the near future (this month).

As an aside, if you have any other suggestions for component testing with Vue, feel free to open an issue or discussion - and thanks a lot for trying out Cypress 10 so early, and the updated Component Testing!

[lmiller1990]

Should be fixed by #22757

[IlCallo]

vueWrapper type is missing into Cypress 10.4 too
I saw this new paragraph on the docs, but I need to access the wrapper synchronously

[lmiller1990]

I am finding the same thing. Also, cypress/{vue,react} are doing import {} from '@cypress/mount-utils which is not listed as a dependency, so without that, you also miss some completion for things like:

cy.mount(Comp, {
  stylesheets: []
})

etc.

#22757 exposes the Test Utils API and improves the types to cy.mount second arg, but the callback with the Vue Wrapper is still showing as any.

[IlCallo]

This works for me in Cypress 10.10

Cypress.vueWrapper.setProps({ ... })

Has this been definitely fixed?

[lmiller1990]

It looks fine to me, #22757 seems to have done the job.

Can re-open if there is ongoing issues.