Cypress Vue 组件测试在导入 Ref 类型时崩溃（不提供名为“Ref”的导出）

Question

我编写了一个赛普拉斯组件测试，它只需安装我的组件并断言它存在。该组件本身导入了 Vue 的 Ref 类型，也被定义为 TypeScript 组件。

运行测试时，Cypress 因以下错误而崩溃：

请求的模块'/__cypress/src/node_modules/.vite/deps/vue.js?v=861dc0d7'不提供名为'Ref'的导出

我已经用 vue 更新了我的 Cypress

tsconfig.json

的“

types

”，但还没有找到有关如何解决此问题的任何进一步指导。

tsconfig.json
---
{

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "vue", "node"],
    "baseUrl": "./",
    "allowJs": true,
    "paths": {
      "~": ["."]
    },
  },
  "include": ["**/*.ts", "**/*.js"]
}

我的赛普拉斯配置：

cypress.config.js
---
const { defineConfig } = require("cypress")

module.exports = defineConfig({
    component: {
        supportFile: "cypress/support/component.ts",
        devServer: {
            framework: "vue",
            bundler: "vite",
        },
    },
})

我的组件是这样写的：

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>

测试如下：

MyComponent.cy.ts
---
import MyComponent from "./MyComponent.vue"

beforeEach(() => {
    cy.mount(MyComponent)
})

it("Test My Component", () => {
    cy.get(".my-component").should("exist")
})

Answer 1

您在 Typescript 项目中有

cypress.config.js

，这让我认为该文件正在指示 Cypress 不要使用 Typescript（

import type {Ref}

在 javascript 中不是有效语法）。

如果我在正在运行的 Typescript 项目中使用您的组件，该项目具有

cypress.config.ts

和相应的更改，它会识别该类型导入。

（注意我有旧版本的 Vue）

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "vue-cli",
      bundler: "webpack",
    },
  },
})

您还需要在组件中导入具体

ref

<script setup lang="ts">
import type { Ref } from "vue"
import { ref } from "vue"            <-- add this 

const counter: Ref<number> = ref(1) 
</script>

Answer 2

找到问题的根源。看来在我的

tsconfig.json

文件中，我是从 nuxt' tsconfig 扩展的 (

"extends": "./.nuxt/tsconfig.json"

)

看来只要删除这一行就可以解决问题。