I wrote a Cypress component test that simply mounts my component and asserts it exists. The component itself imports Vue's Ref type and is also defined as a TypeScript component.
When running the test, Cypress crashes on the following error:
The requested module '/__cypress/src/node_modules/.vite/deps/vue.js?v=861dc0d7' does not provide an export named 'Ref'
I've already updated my Cypress tsconfig.json
's "types
" with vue, but haven't found any further direction on how to solve this issue.
tsconfig.json
---
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "vue", "node"],
"baseUrl": "./",
"allowJs": true,
"paths": {
"~": ["."]
},
},
"include": ["**/*.ts", "**/*.js"]
}
My Cypress config:
cypress.config.js
---
const { defineConfig } = require("cypress")
module.exports = defineConfig({
component: {
supportFile: "cypress/support/component.ts",
devServer: {
framework: "vue",
bundler: "vite",
},
},
})
This is how my component is written:
MyComponent.vue
---
<template>
<div class="my-component">
{{ counter }}
</div>
</template>
<script setup lang="ts">
import type { Ref } from "vue"
const counter: Ref<number> = ref(1)
</script>
And the test goes as following:
MyComponent.cy.ts
---
import MyComponent from "./MyComponent.vue"
beforeEach(() => {
cy.mount(MyComponent)
})
it("Test My Component", () => {
cy.get(".my-component").should("exist")
})
Found the origin of the issue. It seems that in my tsconfig.json
file, I was extending from nuxt' tsconfig ("extends": "./.nuxt/tsconfig.json"
)
It seems that simply removing this line solved the issue.