# vue-composition-test-utils **Repository Path**: thoughtworks/vue-composition-test-utils ## Basic Information - **Project Name**: vue-composition-test-utils - **Description**: Simple vue composition api unit test utilities for Vue 2 and 3 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-06-08 - **Last Updated**: 2021-06-24 ## Categories & Tags **Categories**: vue-extensions **Tags**: None ## README # vue-composition-test-utils Simple vue composition api testing utilities [![Actions Status](https://github.com/ariesjia/vue-composition-test-utils/workflows/Node%20CI/badge.svg)](https://github.com/ariesjia/vue-composition-test-utils/actions) [![NPM](https://img.shields.io/npm/v/vue-composition-test-utils.svg)](https://www.npmjs.com/package/vue-composition-test-utils) [![license](https://badgen.net/badge/license/MIT/blue)](https://github.com/ariesjia/vue-composition-test-utils/blob/master/LICENSE) ## Install ```bash // use yarn yarn add vue-composition-test-utils -D // use npm npm install vue-composition-test-utils -D ``` ## Demo #### Code ```js import { ref } from 'vue' export function useCounter(initialValue = 0) { const count = ref(initialValue) const inc = (delta = 1) => (count.value += delta) return { count, inc } } ``` #### Test ```js import { mountComposition, nextTick } from 'vue-composition-test-utils' test('should get current composition result', function() { const wrapper = mountComposition(useCounter) expect(wrapper.result.current.count.value).toEqual(0) }); test('should render template though template option', async function() { const wrapper = mountComposition(useCounter, { component: { template: 'hello world {{result.current.count.value}}', } }) expect(wrapper.html()).toEqual('hello world 0') await nextTick(() => { wrapper.result.current.inc() }) expect(wrapper.result.current.count.value).toEqual(1) expect(wrapper.html()).toEqual('hello world 1') }); ``` #### vue2 + @vue/composition-api demo [https://github.com/ariesjia/vue-composition-test-utils/blob/master/packages/test-vue2/test/simple.test.js](https://github.com/ariesjia/vue-composition-test-utils/blob/master/packages/test-vue2/test/simple.test.js) #### vue3 demo [https://github.com/ariesjia/vue-composition-test-utils/blob/master/packages/test-vue3/test/simple.test.js](https://github.com/ariesjia/vue-composition-test-utils/blob/master/packages/test-vue3/test/simple.test.js) ## API ```typescript import {GlobalMountOptions} from "@vue/test-utils/dist/types"; import {ComponentOptionsWithoutProps} from "vue"; interface MountingOptions { data?: () => {} extends Data ? any : Data extends object ? Partial : any; props?: Props; attrs?: Record; slots?: SlotDictionary & { default?: Slot; }; global?: GlobalMountOptions; attachTo?: HTMLElement | string; shallow?: boolean; component?: ComponentOptionsWithoutProps; } interface MountingResult { current: R | null; error: Error | null; } export declare const mountComposition: (callback: () => R, options?: MountingOptions) => import("@vue/test-utils").VueWrapper, import("vue").VNodeProps & Props, {}, false, import("vue").ComponentOptionsBase>> & { result: MountingResult; }; export const nextTick: (fn?: () => void) => Promise ``` ### Thanks This project is inspired by [vue-demi](https://github.com/antfu/vue-demi)