Is the example really showcasing the type of the HelloWorld Vue?

[chenxeed]

Hi @eddyerburgh , appreciate for the example you've made.

I want to make sure if the example I was looking for, match with the example here.

Basically, I need to write a test that has integration with my component's interface.

So I modify your test file a bit, to be like this:

describe('HelloWorld.vue', () => {
  test('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount<HelloWorld>(HelloWorld, {
      propsData: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
    expect(wrapper.vm.msg).toMatch(msg); // add this new expectation
  });
});

And I got typescript error on the new expectation, saying:

I saw that we can register the Vue instance on the mount<T>/shallowMount<T>, so I modified the wrapper to this:

    const wrapper = shallowMount<HelloWorld>(HelloWorld, {
      propsData: { msg },
    });

And then I got different error, which is the error that always troubling me because it can't get the HelloWorld instance:

In the end, I still couldn't find a way to solve this problem, perhaps do you think this is a bug or not supported yet?

If so, I also wonder on where should I report this, and if there's a recommended way for me to help, I would like to. Thank you @eddyerburgh

[eddyerburgh]

I believe this comment:

as Blake and a few others explained above, it's currently not possible to infer the type of wrapper.vm, as it has a type of Vue, but to make it work, it must be able to somehow infer the type from inside the .vue component, which is currently not possible.

Yesterday after Vue.js London, I had the pleasure to talk to @DanielRosenwasser and he also confirmed, that currently the best ways are most probably to either use type assertion (wrapper.vm).msg or to use vm.$data. (because vm.$data is typed as any).

Hope this clears it up a bit further.

From https://github.com/vuejs/vue-test-utils/issues/255 answers your question