@vue/test-utils error with vue-property-decorator, vue-class-component: "Property 'functional' is missing in type 'VueConstructor" [saved for later]

vue_test_utils_cryptic_error.md

@vue/test-utils cryptic error

Encountered this and I know I'll end up making the same mistake again. Saving it here so I can hopefully find it on Bing ™️ in the future.

Error

Argument of type 'VueConstructor<Vue>' is not assignable to parameter of type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'.
  Property 'functional' is missing in type 'VueConstructor<Vue>' but required in type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'.

Sample Test

import { Wrapper, config, mount } from '@vue/test-utils';

import Form from '@/components/Form.vue';

describe('Form.vue', () => {
  it('should look fantastic', () => {
    const wrapper = mount(Form, { // <-- big red squiggly here preventing you from moving further
      props: {
        title: 'I am a talking computer',
      },
    });
  });
});

The Fix

When using @vue/test-utils, props are passed to components using propsData, not props. Using props causes the above cryptic error message.

import { Wrapper, config, mount } from '@vue/test-utils';

import Form from '@/components/Form.vue';

describe('Form.vue', () => {
  it('should look fantastic', () => {
    const wrapper = mount(Form, {
      propsData: { // <-- `propsData` instead of `props`
        title: 'I am a talking computer',
      },
    });
  });
});