[英]How to test components with dynamic imports in vue-test-utils and jest
如果问题仍然相关(我没有找到任何直接的答案)尝试“存根”应该导入的组件。
零件
<template>
<div>
<dynamic-imported-component-one id="componentOne"></dynamic-imported-component-one>
<dynamic-imported-component-two id="componentTwo"></dynamic-imported-component-two>
</div>
</template>
<script>
const ComponentOne = resolve => import(/* webpackChunkName: "views/view-ComponentOne-vue" */ '../Components/ComponentOne.vue');
const ComponentTwo = resolve => import(/* webpackChunkName: "views/view-ComponentTwo-vue" */ '../Components/ComponentTwo.vue');
export default {
components: {
'dynamicImportedComponentOne': ComponentOne,
'dynamicImportedComponentTwo': ComponentTwo }
}
</script>
测试:
describe('SomeComponent.vue', () => {
const stubs = {
dynamicImportedComponentOne: '<h3>Stubbed component one</h3>',
dynamicImportedComponentTwo: '<h3>Stubbed component one</h3>'
}
it('test for SomeComponent', () => {
const wrapper = shallowMount(SomeComponent, { stubs });
expect(wrapper.find('#componentOne').exists()).toBeTruthy();
expect(wrapper.find('#componentTwo').exists()).toBeTruthy();
});
});
您无法测试 ComponentOne/ComponentTwo 内容,但无论如何都应该在单独的测试中完成。
您是否尝试在 you.babelrc 中使用"dynamic-import-node"
? 它似乎为我修复了已安装父项中子组件的动态导入。 我从https://github.com/enzymejs/enzyme/issues/1460#issuecomment-355193587得到了指针
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.