Skip to content

Instantly share code, notes, and snippets.

@AlbinoDrought

AlbinoDrought/vue_test_utils_cryptic_error.md

Last active June 13, 2019 17:42
Download ZIP

Revisions

  1. AlbinoDrought revised this gist Jun 13, 2019. No changes.
  2. AlbinoDrought revised this gist Jun 13, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions vue_test_utils_cryptic_error.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@ 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',',
    title: 'I am a talking computer',
    },
    });
    });
    @@ -42,7 +42,7 @@ describe('Form.vue', () => {
    it('should look fantastic', () => {
    const wrapper = mount(Form, {
    propsData: { // <-- `propsData` instead of `props`
    title: 'I am a talking computer',',
    title: 'I am a talking computer',
    },
    });
    });
  3. AlbinoDrought created this gist Jun 13, 2019.
    50 changes: 50 additions & 0 deletions vue_test_utils_cryptic_error.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    # @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 :tm: in the future.

    ## Error

    ```english
    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

    ```ts
    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.
    ```ts
    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',',
    },
    });
    });
    });
    ```