cypress: Not able to use Component Testing with Vite/Vue after upgrade to TypeScript 5

Current behavior

I am using Vue 3.2.47, Vite 4.3.3, TypeScript 5.0.4 and I get TypeScript error message after upgrade. It seems similar as the issue that was fixed in #25538

Desired behavior

No error message

Test code to reproduce

MyComponent.ts:

<template>
    <span>
      <slot name="item" v-bind="{ item: item }"></slot>
    </span>
</template>

<script setup lang="ts">
interface Props {
  item: any;
}

defineProps<Props>();
</script>

MyComponent.cypress.ts:

import { mount } from 'cypress/vue';
import { h } from 'vue';
import MyComponent from './MyComponent .vue';

describe('MyComponent ', () => {
  it('should render', () => {
    mount(MyComponent , {
      props: {
        item: {
          id: 1,
          text: 'First element',
        }
      },
      slots: {
        item: ({ item }: { item: any }) =>
          h('div', {}, `${item.id} - ${item.text}`),
      },
    });
  });
});

Error is:

MyComponent.cypress.ts:7:11 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '__VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>, { ...; }>' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<__VLS_TypePropsToRuntimeProps<Props>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string>'.
      Type '__VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>, { ...; }>' is not assignable to type 'ComponentOptionsBase<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & { [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined; }, ... 10 more ..., string>'.
        Types of property 'emits' are incompatible.
          Type 'ThisType<void> | (string[] & ThisType<void>) | undefined' is not assignable to type '(string[] & ThisType<void>) | undefined'.
            Type 'ThisType<void>' is not assignable to type 'string[] & ThisType<void>'.
              Type 'ThisType<void>' is missing the following properties from type 'string[]': length, pop, push, concat, and 31 more.

7     mount(ListInteractive, {
            ~~~~~~~~~~~~~~~

  node_modules/cypress/vue/dist/index.d.ts:1339:18
    1339 declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D extends {}, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions> & PublicProps, D>): Cypress.Chainable<{
                          ~~~~~
    The last overload is declared here.


Found 1 error in MyComponent.cypress.ts:7

Cypress Version

12.11.0

Node version

v18

Operating System

Windows

Debug Logs

No response

Other

No response

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 7
  • Comments: 16 (6 by maintainers)

Most upvoted comments

It may be the type definitions in cypress/vue need updating to sync with the latest version of Test Utils. You can see here it is on 2.3.2 still https://github.com/cypress-io/cypress/blob/e0255f99c253ab2cce83d858369b8c6de2e60637/npm/vue/package.json#L21

I think someone needs to make a PR to update that.

Note that cypress/vue bundles Test Utils - it will not slurp up the one in your node_modules, so you can’t just install the latest Test Utils, Cypress must update the one they are using (just need to do the dependency update and wait for the next Cypress release).

We had a very similar error, when having a slot in a tested component. In the end we could silence the error by setting strictFunctionTypes: false in tsconfig.json. We consider this a workaround rather than a fix though, and it could be nice not to be forced to have a less strict typescript configuration while using cypress and vue 🙏

I am just guessing here - but I believe there is chance this could be fixed with latest type file from @vue/test-utils. Please see related issue, which is also about combination of slots and props: https://github.com/vuejs/test-utils/issues/2054

This fix is coming in @vue/test-utils 2.4.0, but not released yet.