I'm currently facing challenges setting up a new project. The technologies I am using include Vue3, TypeScript, and Cypress. It seems like the problem lies within the TypeScript configuration.
Below is a Minimal Working Example (MWE) of my setup. Any assistance would be greatly appreciated.
Within
src/component/MinimalWorkingExample.vue<script setup lang="ts">
interface Props {
headerText: string;
}
const props = defineProps<Props>();
</script>
<template>
<div>
<slot></slot>
</div>
</template>
<style lang="scss" scoped></style>
Also, there is a Cypress test for the component located in
src/component/MinimalWorkingExample.cy.tsimport MinimalWorkingExample from "./MinimalWorkingExample.vue";
describe("<MinimalWorkingExample />", () => {
it("renders", () => {
cy.mount(MinimalWorkingExample, {
props: { headerText: "Testing" },
slots: { default: "Testing text ..." },
});
});
});
The issue arises when my IDE shows red underline on MinimalWorkingExample in
cy.mount(MinimalWorkingExample, ...No overload matches this call. Running vue-tsc --noEmit further elaborates on the same issue.
[Detailed error message here]
Intriguingly, when I remove the line containing <slot></slot>, the IDE stops highlighting MinimalWorkingExample and running vue-tsc --noEmit succeeds without any output.
Similarly, if I retain <slot></slot> but eliminate the headerText: string; property, all works fine as well.
Moreover, using as any in
cy.mount(MinimalWorkingExample as any, ...Additional information:
Below is my tsconfig.json file:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": [
"esnext",
"dom",
"dom.iterable"
],
"allowJs": false,
"jsx": "preserve",
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmit": true,
"types": [
"node",
"vite/client",
"cypress",
"./src/shims-vue.d.ts"
]
},
"include": [
"src",
"test/cypress"
]
}