typescriptvue.jscypresscypress-component-test-runner

Cypress Vue component test crashes on import Ref type (does not provide an export named 'Ref')


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")
})


Solution

  • 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.