Not able to use Component Testing with Vite/Vue after upgrade to TypeScript 5 #26628
Comments
lmiller1990
added
npm: @cypress/vue
|
@mbp I am not able to reproduce the same error using those versions of the libraries you mention, but I might not have setup my project the same as you. Please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide. |
|
#26633 may solve the issue. |
|
@warrensplayer the issue can be reproduced by the same repro that is in #25538 So steps to reproduce:
I don't know how to test if #26633 fixes the issue |
|
Now that #26633 is part of 12.12.0, I tested again with the updated dependency. But it still does not compile. Line numbers changed a little though: |
|
Thanks for the updated info @mbp, we'll look into this some more. |
|
I'm having the same error on a project of mine for now, i've |
|
I was able to confirm this type error still exists when updating dependencies in the sample repo as documented in the comment above here: #26628 (comment) The issue is with the |
warrensplayer
added
the
Triaged
|
I am just guessing here - but I believe there is chance this could be fixed with latest type file from This fix is coming in @vue/test-utils 2.4.0, but not released yet. |
|
Very similar error, here is my reproduction: Setup
package.json {
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"test:e2e": "cypress open"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"@inertiajs/vue3": "^1.0.0",
"@tailwindcss/forms": "^0.5.3",
"@types/ziggy-js": "^1.3.2",
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.12",
"axios": "^1.1.2",
"cypress": "^12.17.4",
"laravel-vite-plugin": "^0.7.5",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "^5.0.2",
"vite": "^4.0.0",
"vue": "^3.2.41",
"vue-tsc": "^1.2.0"
},
"dependencies": {
"vuetify": "^3.3.14"
}
}InputLabel.vue <script setup lang="ts">
defineProps<{
value?: string;
}>();
</script>
<template>
<label class="block font-medium text-sm text-gray-700 dark:text-gray-300">
<span v-if="value">{{ value }}</span>
<span v-else><slot /></span>
</label>
</template>InputLabel.cy.ts import InputLabel from '../../../resources/js/Components/InputLabel.vue'
describe('<InputLabel />', () => {
it('renders', () => {
cy.mount(InputLabel, {
props: {
value: 'Test Label'
}
})
})
})Error for InputLabel.cy.ts (sorry it's german) PChip.vue (bunch of vuetify components) <script setup lang="ts">
defineProps<{
value?: string;
}>()
</script>
<template>
<v-container class="pa-4">
<v-chip class="mb-6">
{{ value }}
</v-chip>
<v-text-field label="Label"></v-text-field>
<v-avatar
color="brown"
>
<span class="text-h5">WE</span>
</v-avatar>
<div class="mt-2">
<v-btn color="error" class="mb-2 mr-2">Test</v-btn>
<v-btn color="warning" class="mb-2 mr-2">Test</v-btn>
<v-btn color="success" class="mb-2 mr-2">Test</v-btn>
</div>
</v-container>
</template>PChip.cy.ts import PChip from '../../../resources/js/Components/PChip.vue'
describe('<PChip />', () => {
it('renders', () => {
cy.mount(PChip, {
props: {
value: 'Test Chip'
}
})
})
})Error for PChip.cy.ts component.ts // ***********************************************************
// This example support/component.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Import styles
import '../../../resources/css/app.css'
import 'vuetify/styles'
import '@fortawesome/fontawesome-free/css/all.css'
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from 'cypress/vue'
import { h } from 'vue'
import { VApp } from 'vuetify/components'
import vuetify from '../../../resources/js/plugins/vuetify'
Cypress.Commands.add('mount', (component, options = {}) => {
options.global = options.global || {}
options.global.plugins = options.global.plugins || []
options.global.plugins.push({
install(app) {
app.use(vuetify)
},
})
return mount(() => {
return h(VApp, [h(component, options.props)])
}, options)
})
// Example use:
// cy.mount(MyComponent)
type MountParams = Parameters<typeof mount>
type OptionsParam = MountParams[1]
declare global {
namespace Cypress {
interface Chainable {
/**
* Helper mount function for Vue Components
* @param component Vue Component or JSX Element to mount
* @param options Options passed to Vue Test Utils
*/
mount(component: any, options?: OptionsParam): Chainable<any>
}
}
}ResultsThe components get rendered correctly within cypress but I get the mentioned TS errors. Also, my component is labeled in Cypress as InputLabel.cy.ts
PChip.cy.ts
|
|
We had a very similar error, when having a slot in a tested component. In the end we could silence the error by setting |
This still seems to be the issue. Did you manage to find a workaround? |
I use this ugly workaround: |
|
It may be the type definitions in Line 21 in e0255f9 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 |
|
Has anything happened so far? |
|
Not sure, check to see if the internal version of Test Utils was updated, if not you could submit a PR! See above post for more info. |
I am giving this a try right now. Also, the docs might have to be updated or even extended for Vuetify specifically since the example there is not really working for me and my setup rather looks something like this (not that it is not fully TypeScript compliant and still errors at import { h } from 'vue'
import { mount } from 'cypress/vue'
import { VLayout } from 'vuetify/components'
import vuetify from '@/plugins/vuetify'
type MountParams = Parameters<typeof mount>
type OptionsParam = MountParams[1]
declare global {
namespace Cypress {
interface Chainable {
mount(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
component: any,
options?: OptionsParam
// eslint-disable-next-line @typescript-eslint/no-explicit-any
): Chainable<any>
}
}
}
Cypress.Commands.add('mount', (component, options = {}) => {
options.global = options.global || {}
options.global.plugins = options.global.plugins || []
options.global.plugins.push({
install (app) {
app.use(vuetify)
}
})
return mount(VLayout, {
...options,
slots: {
default: h(component, options.props, {
...options.slots
})
}
})
})Note that I use Looking into the official Cypress repo, I noticed that they are using pure JS in |
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:MyComponent.cypress.ts:Error is:
Cypress Version
12.11.0
Node version
v18
Operating System
Windows
Debug Logs
No response
Other
No response
The text was updated successfully, but these errors were encountered: