Vue 测试无渲染组件（jsx scopedSlots）答案

【问题标题】：Vue test renderless component (jsx scopedSlots)Vue 测试无渲染组件（jsx scopedSlots）
【发布时间】：2020-10-12 04:31:32
【问题描述】：

可以在不模拟的情况下测试无渲染组件吗？我有这样的组件

export default {
  render() {
    return this.$scopedSlots.default({
      loadData: this.loadData,
    })
  },

在模板中调用它

<template>
<div>
   <renderless-component v-slot="componentProps" >
      <button @click="componentProps.loadData">
   </renderless-component>
</div>
</template>

当尝试使用 mount 或 shallowMount 对其进行测试时，按钮未呈现。那么，对无渲染组件进行单元测试的正确方法是什么？

【问题讨论】：

1.你得到什么样的错误？ 2. 你的组件在这样使用时能工作吗？
1.不渲染放置在默认插槽中的按钮和其他元素。所以在测试中我的组件看起来像

。例如，如果我在没有 v-slot="componentProps" 按钮的情况下进行相同的测试，则会呈现。 2. 是的，工作得很好。

标签： vue.js testing vuejs2 vue-test-utils

【解决方案1】：

像这样自定义 shallowMountView，然后在你需要的地方导入。不要全局导入无渲染组件。

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) || '';
  }
}

【讨论】：