[Vuejs]-Vue test renderless component (jsx scopedSlots)

Custom shallowMountView like this, and import where u need. Don’t global import Renderless Component.

global.shallowMountView = (viewComponent, options) => {
  return shallowMount(viewComponent, {
    ...options, //TODO: use deepMerge instead
    // Vue 3
    global: {
      stubs: {
        RenderlessComponent: {
          setup(props, { slots }) {
            // For anyone use Fragments aka multi-root components use
            // h('div', slots.default(props)) instead of  
            // slots.default(props)
            return () => (slots.default ? slots.default(props) : '');
          },
        },
      },
    },
    // Vue 2
    stubs: {
      RenderlessComponent: {
        render(h, { slots }) {
          return this.$scopedSlots.default(this.$props) || '';
        },
      },
    },
  });
};


// viewComponent.vue
import Layout from '@layouts/layout.vue';
export default {
  components: {
    Layout, // Renderless component (Layout.vue)
  }
}
<template>
  <Layout is="main" data-test="view-layout">Test</Layout>
<template/>

// Renderless component (Layout.vue)
import Layout from '@layouts/layout.vue';
export default {
  setup(props) { // Vue 3
     return () => slots.default(props);
  },
  render(h) {  // Vue 2 use render
    return this.$scopedSlots.default(this.$props) || '';
  }
}