Vue-test-utils: propsData not initialized during mount

[feedthejim]

Hi,

While using your library, i noticed that props passed as options to mount by affecting to propsData is not passed to the component. I looked into your test-suite and it seems you also didn't really check it.

Here's the code in question:

  it('returns new VueWrapper with mounted Vue instance with props, if passed as propsData', () => {
    const prop1 = { test: 'TEST' }
    const wrapper = mount(Vue.extend(ComponentWithProps), { propsData: { prop1 }})
    if (wrapper.vm.$props) {
      expect(wrapper.vm.$props.prop1).to.equal(prop1)
    } else {
      expect(wrapper.vm.$options.propsData.prop1).to.equal(prop1)
    }
  })

This is weird because an if shouldn't exist in a test case, we shouldnt verify that it exists in options and thus it never tests the first case. The props are not initialized. Is it by design or is it a bug ?

[eddyerburgh]

You don't need to extend the component, just pass the component object:

const wrapper = mount(ComponentWithProps, { propsData: { prop1 }})

There isn't any checking in the code because the options are passed to the Vue instance when it's instantiated.

[feedthejim]

Hi, thanks for the fast response. The code in question is actually from your unit testing,
I added Vue.extend to mimic the way we use components in our app.
We use Vue.extend to make use of the new Vue.js typings when developping in Typescript.

What should be the steps taken in order to use vue-test-utils ?

[feedthejim]

Nevermind I checked into your code and in create-instance.js i modified this line

const Constructor = vue.extend(component)

to this

const Constructor = vue.extend(component.extend ? component.options : component)

so that it can support a vue.extend instance. Could you add it as a feature ?

[eddyerburgh]

Great 🙂

Yep sure, would you be able to make a PR?

[feedthejim]

112 :)

[eddyerburgh]

This has been released in 1.0.0-beta.3

[bee0060]

I had the same issue recently.
I worked with vue-property-decorator and use @Prop decorator to marked props.
This may not because of vue-test-utils, but hope this message could help others reach here.

partial ts part of component likes:

@Component
export default class Hello extends Vue {
  @Prop({
    type: String
  })
  title
};

The propsData were not initialized if I called like below:

describe("Hello.vue", () => {
  it("renders props", () => {
    const wrapper = shallowMount(Hello, {
      propsData: { title: 'hello' }
    })
    // I cannot get the title from wrapper

  });
});

My workaround is add the props in options argument of shallowMount, like:

describe("Hello.vue", () => {
  it("renders props", () => {
    const wrapper = shallowMount(Hello, {
      props: {
        title: {
          type: String
        }
       }
      propsData: { title: 'hello' }
    })
    // I can get the title as 'hello' from wrapper now

  });
});