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

Posted 2023-02-22

【中文标题】Vue 测试无渲染组件（jsx scopedSlots）

【英文标题】：Vue test renderless component (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. 是的，工作得很好。

【参考方案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) || '';