https://github.com/ariesjia/vue-composition-test-utils

Simple vue composition api unit test utilities support both Vue 2 and 3
https://github.com/ariesjia/vue-composition-test-utils

composition-api unit-testing vue

Last synced: about 2 months ago
JSON representation

Simple vue composition api unit test utilities support both Vue 2 and 3

• Host: GitHub
• URL: https://github.com/ariesjia/vue-composition-test-utils
• Owner: ariesjia
• License: mit
• Created: 2020-10-18T16:18:33.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-22T03:34:15.000Z (11 months ago)
• Last Synced: 2024-11-28T14:56:47.828Z (about 2 months ago)
• Topics: composition-api, unit-testing, vue
• Language: JavaScript
• Homepage:
• Size: 236 KB
• Stars: 37
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)