GitHub - ariesjia/vue-composition-test-utils: Simple vue composition api unit test utilities support both Vue 2 and 3 (original) (raw)

vue-composition-test-utils

Simple vue composition api testing utilities

Install

// use yarn yarn add vue-composition-test-utils -D // use npm npm install vue-composition-test-utils -D

Demo

Code

import { ref } from 'vue'

export function useCounter(initialValue = 0) { const count = ref(initialValue) const inc = (delta = 1) => (count.value += delta) return { count, inc } }

Test

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

vue3 demo

https://github.com/ariesjia/vue-composition-test-utils/blob/master/packages/test-vue3/test/simple.test.js

API

import {GlobalMountOptions} from "@vue/test-utils/dist/types"; import {ComponentOptionsWithoutProps} from "vue";

interface MountingOptions<Props, Data = {}> { data?: () => {} extends Data ? any : Data extends object ? Partial : any; props?: Props; attrs?: Record<string, unknown>; 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: <R, Props>(callback: () => R, options?: MountingOptions) => import("@vue/test-utils").VueWrapper<import("vue").ComponentPublicInstance<Props, {}, {}, {}, {}, Record<string, any>, import("vue").VNodeProps & Props, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>> & { result: MountingResult; };

export const nextTick: (fn?: () => void) => Promise

Thanks

This project is inspired by vue-demi