Jest coverage doesn't pick up on vue functional component

Question

I have a Vue functional component, with some tests using Jest, but the coverage say 0 for this file. Is this the right way to test functional components in Vue?

this is an example of my component

<template functional>
      <div :class="['name', ...props.extraClasses]">
          {{ props.itemName }}
      </div>
</template>

<script>
export default {
    props: {
        itemName: {
            type: String,
            required: true,
        },
        extraClasses: {
            type: Array,
        },
    },
};
</script>

This is what 1 of my tests look like

test('it works correctly with all props', () => {

    const wrapper = shallow(cmp, {
        context: {
          props: {
            itemName: 'item name',
            extraClasses: ['extra1', 'extra2'],
          }
        },
      })
    const name = wrapper.find('.name');
    expect(name.classes()).toEqual(['name', 'extra1', 'extra2']);
    expect(name.text()).toBe('item name');
});

After I run jest, I'm seeing the coverage is 0, and the uncovered lines are the props. Is there any other way to test the functional component?

And how do I get the jest coverage to work correctly for this test file?

Thank you

stenwolf · Accepted Answer · 2019-05-14 18:47:37Z

1

this is reported to be fixed in version 4 https://github.com/vuejs/vue-jest/issues/88 I tried upgrading to [email protected] and confirmed this issue was fixed

answered May 14, 2019 at 18:47

stenwolf

3115 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Jest coverage doesn't pick up on vue functional component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related