Cypress Vue 组件测试 Ref 导入崩溃？速速前来解决！

vue.js

2024-03-13 13:16:26

Cypress Vue 组件测试因导入 Ref 类型崩溃：修复指南

问题：没有提供名为“Ref”的导出

使用 Cypress 测试 Vue 组件时，导入 Vue 的 Ref 类型可能会导致测试崩溃，并出现“没有提供名为 'Ref' 的导出”错误。

解决方案

解决此问题的方法如下：

1. 确保依赖项最新

更新 package.json 中的 Vue 和 Cypress 依赖项，运行 npm install 或 yarn install 安装最新版本。

2. 检查 tsconfig.json 路径

确保 tsconfig.json 中的 "paths" 字段包含指向 Vue 安装目录的正确路径。

3. 添加 vue 到 vite.config.js

在 vite.config.js 文件中，添加以下配置：

resolve: {
  alias: {
    'vue': 'vue/dist/vue.esm-bundler.js'
  }
}

4. 识别 Vue

在 cypress/support/component.ts 文件中，添加以下代码：

import Vue from 'vue'
Cypress.VueWrapper.mount = Vue.prototype.mount
Cypress.VueWrapper.shallowMount = Vue.prototype.shallowMount

其他提示

使用 Cypress 和 Vue 的兼容版本。
清除 Cypress 缓存：运行 cypress cache clear。
使用最新版本的浏览器运行测试。

示例代码

MyComponent.vue：

<template>
  <div class="my-component">
    {{ counter }}
  </div>
</template>

<script setup lang="ts">
import { 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")
})