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)
It may be the type definitions in
cypress/vueneed 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#L21I 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: falseintsconfig.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/2054This fix is coming in @vue/test-utils 2.4.0, but not released yet.