我正在测试一个动态导入子组件的组件。这是该部分的屏幕截图
在 Parent.vue 内部
错误
它适用于正常导入,但不适用于动态异步导入。任何人都可以帮助配置 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 内容,但无论如何都应该在单独的测试中完成。