如何对独立的 Vue 组合进行单元测试

Question

我有一个类似于 the example in the docs 的设置，其中我的组合位于与我的组件不同的文件中，如下所示：

// 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>

我想为 composition.js 文件编写一个单独的（基于 Jest 的）测试文件。但是，直接调用组合时，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);
    });
});

Answer 2

如果有人正在寻找 Vue 可组合项的 react-hooks-testing-library 等效项，您可以使用此包

https://github.com/wobsoriano/vue-test-composables

这里有一个 vue-query 的例子：

import { useQuery, useQueryProvider } from 'vue-query'
import { renderComposable } from 'vue-test-composables'

function useUser() {
  return useQuery('user', () =>
    fetch('/api/user').then(
      res => res.json,
    ),
  )
}

test('useUser', async() => {
  const { result, waitFor } = renderComposable(() => useUser(), {
    provider() {
      useQueryProvider()
    },
  })

  await waitFor(() => result.isSuccess.value)

  await expect(result.data.value).resolves.toMatchObject({
    id: 1,
    username: 'johndoe',
    email: 'johndoe@mail.com',
  })
})

如何对独立的 Vue 组合进行单元测试

How to unit test standalone Vue composition

vue.js

jestjs

vue-test-utils

vue-composition-api