Как провести самостоятельное тестирование Vue композиции

Question

У меня есть настройка, аналогичная , пример в документации , где моя композиция находится в отдельном файле от моего компонента следующим образом:

// composition.js
import { onMounted } from '@vue/composition-api';

export default function useComposition() {
  onMounted(() => {
    console.log('Hello, world!');
  });
}

// component.vue
<template>...</template>

<script>
import { createComponent } from '@vue/composition-api';

export default createComponent({
  setup() {
    useComposition();
  }
})
</script>

Я хотел бы написать отдельный (основанный на Jest) тестовый файл только для файла composition.js. Однако при непосредственном вызове композиции Vue выдаст ошибку (как и ожидалось):

// composition.test.js

import useComposition from './composition';

describe('Composition', () => {
  it('Works', () => {
    useComposition();
    // Error: [vue-composition-api] "onMounted" get called outside of "setup()"
  });
});

Я попытался смонтировать компонент, основанный на API фиктивной композиции, чтобы обеспечить функцию setup(), но с некоторые проблемы с тем, чтобы заставить его работать:

import { mount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI, { createComponent } from '@vue/composition-api';
import useComposition from './composition';

const localVue = createLocalVue();
localVue.use(VueCompositionAPI);

describe('Composition', () => {
    it('Works', () => {
        const mockComponent = createComponent({
            setup() {
                useComposition();

                return h => h('div');
            }
        });

        mount(mockComponent, { localVue });
        // [Vue warn]: Failed to mount component: template or render function not defined.
    });
});

У кого-нибудь есть какие-нибудь блестящие идеи о том, как заставить это работать, чтобы я мог написать тесты для своих модульных композиций?

Answer 1

Ошибка [Vue warn]: Failed to mount component: template or render function not defined. вызвана тем, что @vue/composition-api не поддерживает возврат функции рендеринга в функцию настройки. Обладая этими знаниями, я смог создать действительную функцию рендеринга фиктивного компонента. Кажется, что следующее работает как ожидалось:

import VueCompositionAPI from '@vue/composition-api';
import { mount, createLocalVue } from '@vue/test-utils';

const localVue = createLocalVue();
localVue.use(VueCompositionAPI);

const mountComposition = (cb: () => any) => {
    return mount(
        {
            setup() {
                return cb();
            },
            render(h) {
                return h('div');
            }
        },
        { localVue }
    );
};

describe('My Test', () => {
    it('Works', () => {
        let value;

        const component = mountComposition(() => {
            value = useComposition();
        });

        expect(value).toBe(true);
    });
});