Recently, I created a Cypress component test for my Vue component by mounting it and verifying its existence. The component utilizes Vue's Ref type and is structured as a TypeScript component.
However, during the test execution, Cypress encountered an error:
An export named 'Ref' was not found in the requested module '/__cypress/src/node_modules/.vite/deps/vue.js?v=861dc0d7'
I've already updated the types in my Cypress tsconfig.json to include 'vue', but haven't been able to resolve this issue.
tsconfig.json
---
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "vue", "node"],
"baseUrl": "./",
"allowJs": true,
"paths": {
"~": ["."]
},
},
"include": ["**/*.ts", "**/*.js"]
}
Below is my Cypress configuration:
cypress.config.js
---
const { defineConfig } = require("cypress")
module.exports = defineConfig({
component: {
supportFile: "cypress/support/component.ts",
devServer: {
framework: "vue",
bundler: "vite",
},
},
})
The component code snippet:
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>
Here's how the test is implemented:
MyComponent.cy.ts
---
import MyComponent from "./MyComponent.vue"
beforeEach(() => {
cy.mount(MyComponent)
})
it("Test My Component", () => {
cy.get(".my-component").should("exist")
})