unit-testing - 如何在单元测试期间使用 vue-test-utils 和 jest 模拟 mixin?
问题描述
我想在 Test.vue 中测试 testMethod,但是 testMethod 使用了从 App.js 导入的 mixin。
测试.vue
<script>
export default {
methods: {
testMethod() {
return 'get'+this.getTestMixin();
}
},
};
</script>
mixins/common.js
export default {
methods: {
getTestMixin() {
return 'test';
},
},
};
如何模拟mixin?我试图像下面那样模拟 mixin 但失败了,知道我在哪里做错了吗?
function getTestMixin() {
return 'test';
}
const localVue = createLocalVue()
localVue.mixin(getTestMixin)
const wrapper = shallowMount(Test, {
localVue,
})
错误信息如下:
TypeError: Cannot read property 'props' of undefined
46 | beforeEach(() => {
> 47 | wrapper = shallowMount(Test, {
| ^
48 | localVue,
49 | });
50 | });
解决方案
如果在浅挂载之前替换 Mixin,则可以模拟它们。就像是:
const localVue = createLocalVue();
const mockMixin = {
methods: {
mixinMethod() {
return 'test';
},
}
}
const MockedTestComponent = { ...TestComponent, mixins: [mockMixin] };
const wrapper = shallowMount(MockedTestComponent, {
localVue,
});
expect(wrapper.vm.mixinMethod()).toEqual('test');
推荐阅读
- mysql - 无法使用来自命令行客户端的不同用户访问数据库
- python - 带有 X、Y 坐标的 Realsense D435 的精确深度距离
- python-3.x - 当蜘蛛使用代理中间件时,Scrapy 在 Deferred 中抛出 TWISTE Unhandled 错误
- android - Gitlab,分支管道失败 - 它实际上是什么意思?它会影响我的提交吗?
- c# - 使用 ChangeTacker 获取通用条目
- node.js - 如何使用 Vue Router 处理域和主题标签之间的 url 数据?
- javascript - 使用 javascript 在 HTML 画布中获取手写数字的矩阵
- reactjs - Reactstrap 下拉菜单打开倍数菜单
- java - Appnext kotlin 集成
- kotlin - Android 房间数据库和“android.os.Looper 中的方法 getMainLooper 未模拟”