Vue.js Can'；t在Cypress Vue组件测试中模拟模块导入

我是新手，但我能够轻松地为我的Vue项目设置它。我目前正在调查是否应该用Cypress替换Jest来测试我们的Vue组件，到目前为止我很喜欢它，我只缺少一个主要功能：模拟模块。我第一次尝试使用

cy.stub（）

，但它根本不起作用，这可能是有意义的，因为我没有尝试模拟Node.js中的实际模块，而是在Webpack中导入的模块

为了解决这个问题，我尝试使用它来模拟网页包模块，但在运行测试时出现了一个错误：

我从Cypress中挑选了一些例子，并在中设置了Rewiremock。老实说，我不知道我做错了什么

---

我真的需要找到一个办法来解决它，否则，我们就不再考虑柏树了，只是开玩笑而已。如果使用Rewiremock不是正确的方法，我该如何实现这一点？非常感谢您的帮助。

如果您能够调整Vue组件以使其更易于测试，则可以将该函数模拟为组件属性

网页包

当vue loader处理

HelloWorld.vue

时，它会计算

getColorOfFruits（）

并设置数据属性，因此要在此处模拟函数，您需要一个类似于rewiremock的网页重新编写器

导出默认值{
名称：“HelloWorld”，
道具：{
msg:String
},
数据（）{
返回{
colorOfFruits:getColorOfFruits（），//在编译期间
};
},
...

Vue创建的钩子

如果在

created（）

钩子中初始化

colorofruits

，则可以在导入后但在装载之前存根

getcolorofruits

函数

HelloWorld.vue

{{msg}}
{{colorofruits.apple}

...
从“@/helpers/fruit.js”导入{getColorOfFruits}”；
导出默认值{
名称：“HelloWorld”，
getColorOfFruits，//将此函数添加到组件以进行模拟
道具：{
msg:String，
},
数据（）{
返回{
colorOfFruits:{}//此处初始化为空
};
},
创建（）{
this.colorofruits=this.$options.colorofruits；//上面保存的引用函数
}
});

HelloWorld.spec.js

从“@cypress/vue”导入{mount}”；
从“/HelloWorld.vue”导入HelloWorld；
它（“模仿苹果”，（）=>{
常量getMockFruits=（）=>{
返回{
苹果：“绿色”，
橙色：“紫色”，
}
}
HelloWorld.getColorOfFruits=getMockFruits；
mount（HelloWorld，{//created（）钩子作为mount（）的一部分调用）
propsData：{
味精：“你好，柏树！”，
},
});
cy.get（“h1”）.包含（“你好，柏树！”）；
cy.get（“h2”）。包含（“绿色”）
});