Missing Typescript types for `vueWrapper` after 10.0 migration

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 https://github.com/cypress-io/cypress/pull/22757