How do you unit test a Vue.js functional component with a render function that returns any array of elements?

Question

In Vue.js, a functional component can return multiple root nodes by using a render function that returns an array of createdElements.

export default {
  functional: true,
  props: ['cellData'],
  render: function (h, context) {
    return [
      h('td', context.props.cellData.category),
      h('td', context.props.cellData.description)
    ]
  }
}

This works great but I'm having trouble trying to create a unit test for such a component. Using shallowMount on the component results in [Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

import { shallowMount } from '@vue/test-utils'
import Cell from '@/components/Cell'

wrapper = shallowMount(Cell, {
  context: {
    props: {
      cellData {
        category: 'foo',
        description: 'bar'
      }
    }
  }
});

This github issue suggests that the component needs to be wrapped in a single root node to actually render it, but trying that results in [vue-test-utils]: mount.context can only be used when mounting a functional component

import { shallowMount } from '@vue/test-utils'
import Cell from '@/components/Cell'

wrapper = shallowMount('<div><Cell></div>', {
  context: {
    props: {
      cellData {
        category: 'foo',
        description: 'bar'
      }
    }
  }
});

So how do I test a functional component that returns multiple root nodes?

just for the rest people, who are wondering if it's possible to return multiple VNode[] from a render function - it's not possible, render function's signature is allowing only a SINGLE VNode, not multiple. — Alexander Kim
– Alexander Kim, Commented Jun 22, 2020 at 6:10

tony19 · Accepted Answer · 2022-07-15 20:28:20Z

10

+200

You could create a higher order, transparent wrapper component that passes all props and event listeners to the inner Cell component using v-bind="$attrs"[1] and v-on="$listeners"[2]. Then you can use propsData to pass props to the wrapper component ..

import { mount } from '@vue/test-utils'
import Cell from '@/components/Cell'

const WrappedCell = {
  components: { Cell },
  template: `
    <div>
      <Cell v-bind="$attrs" v-on="$listeners" />
    </div>
  `
}

const wrapper = mount(WrappedCell, {
  propsData: {
    cellData: {
      category: 'foo',
      description: 'bar'
    }
  }
});

edited Jul 15, 2022 at 20:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 20, 2019 at 13:47

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ronoc4 Over a year ago

How do I test conditions based off a prop?

Munim Munna · Accepted Answer · 2019-01-20 20:31:35Z

You can create a fragment_wrapper for wrapping your Components with Fragments (multiple root elements).

//File: fragment_wrapper.js

exports.fragment_wrapper = function(FragmentComponent){
  const wrapper = {
    components: { FragmentComponent },
    props: FragmentComponent.props,
    template: `<div><FragmentComponent v-bind="$props" v-on="$listeners"/></div>`
  }
  return wrapper;  
}

Then you can use this to test all your Fragmented Components as follows:

import { mount } from '@vue/test-utils'
import { fragment_wrapper } from './fragment_wrapper'
import Cell from './components/Cell'


describe('Test Cell', () => {
  let WrappedCell = fragment_wrapper(Cell);
  const wrapper = mount(WrappedCell, {
    propsData: {
      cellData: {
        category: 'foo',
        description: 'bar'
      }
    }
  });

  it('renders the correct markup', () => {
    expect(wrapper.html()).toContain('<td>foo</td>')
  });
});

Collectives™ on Stack Overflow

How do you unit test a Vue.js functional component with a render function that returns any array of elements?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related