Component testing utilities for Vue.js

Last update: Apr 22, 2022

VueUnit

A library for Vue.js that makes it easier to create and unit test components.

  • Easily test props, events, and slots (including named slots)
  • Optionally shallow render components
  • Simulate simple DOM events (click, input, etc.)
  • Use any test runner / assertion library
  • Mock and stub vuex actions and getters

Unlike other component testing libraries, VueUnit does not focus on DOM traversal. Instead it focuses on making programmatic manipulation of your components much easier. For DOM traversal and assertions it's strongly recommended to use a library such as chai-jquery or jasmine-jquery.

Installation

npm install --save-dev vue-unit

VueUnit requires "vue": "2.*" to be installed, using the standalone build.

Usage

Examples shown are using mocha, chai, sinon, and chai-jquery but you should be able to extrapolate to your framework of choice.

Hooks

VueUnit renders all components in the DOM and needs to handle setup and tear down. VueUnit provides two helpers for this: beforeEachHooks() and afterEachHooks() when need to be called before and after each test, respectively.

For example with mocha this would look like:

import { beforeEachHooks, afterEachHooks } from 'vue-unit'

describe('My test', () => {
  beforeEach(beforeEachHooks)

  it('tests something', () => {
    // test code
  })

  afterEach(afterEachHooks)
})

You should assume all example tests shown are using these hooks.

mount()

The mount() function renders components and allows setting props, listening for events, or putting content into slots.

import { mount } from 'vue-unit'

Basic Component

const BasicComponent = {
  template: `<div class="component">Hello</div>`
}

it('mounts a basic component', () => {
  mount(BasicComponent)
  expect($('.component')).to.contain('Hello')
})

The first argument mount() expects is a Vue component.

Component with props

const ComponentWithProps = {
  template: `
    <div class="component">
      Hello {{ message }}
    </div>
  `,
  props: ['message']
}

it('sets props', () => {
  mount(ComponentWithProps, { message: 'World' })
  expect($('.component')).to.have.text('Hello World')
})

An object representing the data for props, can be passed the second argument.

Component with events

const ComponentWithEvent = {
  template: `
    <button @click="$emit('foo', 'bar')">Click</button>
  `
}

it('listens for events', () => {
  const listener = sinon.spy()
  mount(ComponentWithEvent, {}, { foo: listener })
  simulate($('button'), 'click')
  expect(listener).to.have.been.calledWith('bar')
})

The 3rd argument mount() accepts is an object with listener functions for events to emit. Here we are use the simulate() function to fire a click event.

Component with default slot

const ComponentWithSlot = {
  template: `
    <div class="component">
      <slot></slot>
    </div>
  `
}

it('sets content for a default slot', () => {
  mount(ComponentWithSlot, {}, {}, '<p>Hello</p>')
  expect($('.component')).to.have.html('<p>Hello</p>')
})

Component with multiple slots

const ComponentWithMultipleSlots = {
  template: `
    <div class="component">
      <slot></slot>
      <slot name="foo"></slot>
    </div>
  `
}

it('sets content for multiple slots', () => {
  mount(ComponentWithMultipleSlots, {}, {}, { default: 'Hello World', foo: '<p>Bar</p>' })
  expect($('.component')).to.have.html('Hello World <p>Bar</p>')
})

The 4th argument mount() accepts is an object with values available to be injected via the provide/inject behaviour. It is equivalent to defining provide on an ancestor component.

Component with injects

const ComponentWithInjects = {
  template: `
    <div class="component">
      Hello {{ message }}
    </div>
  `,
  inject: ['message']
}

it('provides values to be injected', () => {
  mount(ComponentWithInjects, {}, {}, {}, { message: 'World' })
  expect($('.component')).to.have.text('Hello World')
})

Options Object

const ComponentWithAllOptions = {
  template: `
    <div class="component" @click="$emit('foo', message)">
      <slot></slot>
      <slot name="foo"></slot>
    </div>
  `,
  props: ['message'],
  inject: ['messageFromAncestor']
}

it('uses an options object', () => {
  const listener = sinon.spy()
  const options = {
    props: { message: 'bar' },
    on: { foo: listener },
    slots: { default: 'Hello World', foo: '<p>Bar</p>' },
    provide: { messageFromAncestor, 'bar' }
  }
  vm = mount(ComponentWithAllOptions, options)
  expect($('.component')).to.have.html('Hello World <p>Bar</p>')
  simulate($('.component'), 'click')
  expect(listener).to.have.been.calledWith('bar')
  expect(vm.messageFromAncestor).to.equal('bar')
})
Option Default Type Description
props {} Object An object containing camelCased props to be passed to the component
on {} Object An object containing listeners to be called when an event is trigger by the component
slots {} Object or String String containing the template for the default slot of the component. Objects containing templates for slots (should be keyed by the slot name).
provide {} Object An object simulating values given from parent components via Vue's provide. Available to the equivalent inject component property.

shallow()

The shallow() function has the same signature as the mount() function, however it will shallow render the component by replacing any locally registered child components with an empty kebab-cased tag of their name.

This enables you to test higher-level components without the concern of the required props or dependencies of nested child components.

For example:

const ChildComponent = {
  name: 'child',
  template: '<span>World</span>'
}
const ComponentWithChild = {
  template: '<div>Hello <child></child></div>',
  components: { ChildComponent }
}

shallow(ComponentWithChild)

Would render:

<div>Hello <child></child></div>

Instead of the actual child component.

build() and buildShallow()

When testing components using mount() or shallow() it can be repetitive to list the component and select DOM elements. The build() and buildShallow() functions allow you to remove some of this repetitive by creating your own mount() or shallow() function with some default arguments and a callback.

For example given this component:

const SomeComponent = {
  template: '<p>{{ message }}</p>',
  props: { foo: { default: 'default message' }}
}

and this test:

it('renders a default message', () => {
  mount(SomeComponent)
  expect($('p')).to.have.text('default message')
})

it('renders a message', () => {
  mount(SomeComponent, { foo: 'bar' })
  expect($('p')).to.have.text('bar')  
})

We could use build() like so:

let paragraph
const mount = build(SomeComponent, () => { paragraph = $('p') })

it('renders a default message', () => {
  mount()
  expect(paragraph).to.have.text('default message')
})

it('renders a message', () => {
  mount({ foo: 'bar' })
  expect(paragraph).to.have.text('bar')  
})

This can be helpful when your components has many selectors you want to test.

simulate(element, event)

The simulate() function will trigger an HTML event on given DOM element. It can accept an DOM element or jQuery object.

For example, triggering a click event on a button would look like so:

const button1 = $('button')
simulate(button1, 'click')

const button2 = document.querySelector('button')
simulate(button2, 'click')

waitForUpdate(cb)

The waitForUpdate() helper function can be used to clean up a chain of async DOM assertions that you would normally have to use Vue.nextTick() for.

For example we could rewrite the following test:

const Component = {
  template: `<p>{{ message }}</p>`,
  props: ['message']
}

it('tests message updates', () => {
  const vm = mount(Component, { message: 'Hello' })
  expect($(vm.$el)).to.have.text('Hello')
  vm.message = 'World'
  return vm.$nextTick().then(() => {
    expect($(vm.$el)).to.have.text('World')
    vm.message = 'VueUnit'
    return vm.$nextTick()
  }).then(() => {
    expect($(vm.$el)).to.have.text('VueUnit')
  })
})

like so:

it('tests message updates', () => {
  const vm = mount(Component, { message: 'Hello' })

  expect($(vm.$el)).to.have.text('Hello')
  vm.message = 'World'
  waitForUpdate(() => {
    expect($(vm.$el)).to.have.text('World')
    vm.message = 'VueUnit'
  }).then(() => {
    expect($(vm.$el)).to.have.text('VueUnit')
  }).end(done)

Please note when using waitForUpdate() use must end your chain of assertions with .end(done) to avoid errors.

Vuex Testing

VueUnit also provides helpers for isolating components from vuex getters and actions in form of fakeGetters() and fakeActions(). These functions must be called before mounting your component.

fakeGetters()

The fakeGetters() function returns a sinon stub which can be used to (optionally) control the value which the getter returns.

For example given this component:

const Component = {
  template: '<p></p>',
  computed: {
    someValue () { return this.$store.getters.foo },
    otherValue () { return this.$store.getters.bar }
  }
}

We might test it like so:

it('fakes a getter', () => {
  const foo = fakeGetters('foo').returns(1234)
  const vm = mount(Component)
  expect(vm.someValue).to.equal(1234)
})

it('fakes a getter in a different way', () => {
  fakeGetters('foo', 1234)
  const vm = mount(Component)
  expect(vm.someValue).to.equal(1234)
})

it('fakes multiple getters', () => {
  fakeGetters({
    foo: 1234,
    bar: 5678
  })
  const vm = mount(Component)
  expect(vm.someValue).to.equal(1234)
  expect(vm.otherValue).to.equal(5678)
})

fakeActions()

The fakeActions() function returns a sinon stub which can be used to spy on the action and control what it returns.

For example given this component:

const Component = {
  template: '<p></p>',
  methods: {
    someMethod (payload) { return this.$store.dispatch('foo', payload) },
  }
}

We might test it like so:

it ('dispatches an action', () => {
  const fooAction = fakeActions('foo').returns('bar')
  const vm = mount(Component)
  return vm.someMethod(1234).then(value => {
    expect(fooAction).to.have.been.calledOnce.and.calledWith(1234)
    expect(value).to.equal('bar')
  })
})

Examples

More sample usage can be found in the examples/ directory.

License

MIT

GitHub

https://github.com/wrseward/vue-unit
Comments
  • 1. Suggestion: Add a way of handling subsequent async assertions

    First of all thanks for the repo. It really helps hiding a lot of boilerplate code when writing unit tests.

    By default when changes are triggered on data you have to use $nextTick in order to verify the expected output. Example:

    vm.msg= "some value"
    vm.$nextTick(()=>{
     //verify that DOM changed here
     vm.msg = "some other value"
     vm.$nextTick(()=>{
     //verify that DOM changed here for the second message update
      done(); //call done callback for the test
     })
    })
    

    Such a way of testing updates can become really cumbersome and ugly. Maybe adding a helper method that will be exposed in the library like waitForUpdate from vue repo. The usage would be:

    waitForUpdate(() => {
       expect(vm.$el.textContent).toBe('123')
       vm.a = 234
     })
    .then(() => {
       // more assertions...
     })
    .then(done)
    

    This can be refined of course so it fits vue-unit better.

    Reviewed by cristijora at 2017-04-29 19:42
  • 2. Implement handling for provide/inject functionality

    Not sure if you want me to write an issue when I've submitted a PR already, but just in case:

    Vue 2.2+ includes the provide/inject functionality for a sort of component-level dependency injection. Could be faked in the existing vue-unit build by mounting the component to be tested within another component using build() to set up the provider, but it'd be nice to be able to stub out provides as part of mount().

    So, PR with that functionality and tests at https://github.com/wrseward/vue-unit/pull/5

    Reviewed by tom-kitchin at 2017-05-24 12:00
  • 3. Implement provide in mount with tests

    Vue 2.2 adds the provide/inject feature for a form of component-level dependency injection. This PR allows for stubbing provides in mount() by adding another argument. Also contains a couple of tests and follows the existing conventions for argument handling. Should not be a breaking change.

    Usage examples:

    mount(ComponentName, {}, {}, {}, { providedThing: 'value' })
    mount(ComponentName, { provide: { providedThing: 'value' } }, optionalCallback)
    
    Reviewed by tom-kitchin at 2017-05-24 11:58
  • 4. Failing tests in waitForUpdate chains time out in Mocha

    When run in Mocha, using waitForUpdate with a failing test results in the async call timing out.

    This is because the waitForUpdate code assumes that the done call will have done.fail and checks for that, but Mocha uses done(e) to report failures.

    PR to resolve: https://github.com/wrseward/vue-unit/pull/3

    Reviewed by tom-kitchin at 2017-05-18 10:03
  • 5. Fix timeouts on failed tests when running in Mocha

    When using waitForUpdate under Mocha, test failure results in timeout as Mocha done does not use done.fail(e). Instead, Mocha just calls done(e) with the error. Update to try that if done.fail is not present. Additionally fixes the slight documentation issue with an incomplete chain complaining that then(done) is missing when it should be end(done).

    Reviewed by tom-kitchin at 2017-05-18 10:00
  • 6. Whether it must be installed Vuex ?

    Hi! Thanks for your repo! ๐Ÿ‘

    In my project, did not use vuex. when I run the unit test, it throw a warning.

    WARNING in ./~/vue-unit/build/index.js
    Module not found: Error: Cannot resolve module 'vuex' in /Users/name/Documents/project/node_modules/vue-unit/build
    

    Does that mean vuex should be a pre-dependent?

    Reviewed by hejianxian at 2017-04-30 06:48
  • 7. Errors testing extended components with 'Vue' option

    I am testing component 'Transformation' which extends the 'Translation' component.

    The code is running fine but I am getting these errors when attempting to mount:

    '[Vue warn]: The data property "modules" is already declared as a prop. Use prop default value instead.
    
    (found in <Root>)'
    '[Vue warn]: The data property "model" is already declared as a prop. Use prop default value instead.
    
    (found in <Root>)'
    '[Vue warn]: The data property "aliases" is already declared as a prop. Use prop default value instead.
    

    This is what my unit tests look like

    import Vue from 'vue';
    import { mount } from 'vuenit';
    import Transformation from './Transformation.vue';
    import Translation from '../Translation/Translation.vue';
    
    const options = {
      Vue: Vue.extend(Translation),
    };
    
    fdescribe('Transformation component', () => {
      let model;
      let vm;
    
      beforeEach(() => {
        model = { id: 3, name: 'name' };
        options.props = { aliases: [], model, modules: [] };
    
        vm = mount(Transformation, options);
      });
    
      it('should open the edit modal when edit is clicked', () => {
    
      });
    
      it('should emit a remove event when the delete button is clicked', () => {
    
      });
    });
    

    Translation has the properties defined, but transformation only defines a few functions that aren't defined in translation. If you need that code as well then I can link it, but it doesn't seem relevant to the problem.

    Reviewed by ajm5774 at 2017-09-18 21:36
  • 8. Support this.$store.state in components

    From what I can tell, it seems right now Vuex testing support is limited to actions and getters. It would be useful to access or fake state as well.

    Currently you get this error if you access state in the component code: '[Vue warn]: Error in created hook: "TypeError: undefined is not an object (evaluating 'this.$store.state')"

    Reviewed by jblotus at 2017-05-24 18:41
  • 9. running unit tests .. 5 errors ...

    node 8, no modification in packge.json

    	> [email protected] test /Users/yves/Developments/WIP/VUE.JS/UNIT TESTING/vue-unit
    	> NODE_ENV=test karma start test/karma.conf.js --single-run
    
    	16 09 2017 18:15:22.358:WARN [watcher]: All files matched by "/Users/yves/Developments/WIP/VUE.JS/UNIT TESTING/vue-unit/node_modules/chai/chai.js" were excluded or matched by prior matchers.
    	16 09 2017 18:15:22.372:WARN [watcher]: All files matched by "/Users/yves/Developments/WIP/VUE.JS/UNIT TESTING/vue-unit/node_modules/chai/chai.js" were excluded or matched by prior matchers.
    	16 09 2017 18:15:36.299:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
    	16 09 2017 18:15:36.300:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
    	16 09 2017 18:15:36.388:INFO [launcher]: Starting browser PhantomJS
    	16 09 2017 18:15:42.679:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket 5I4iT6Y8INf1tlTZAAAA with id 29606836
    	INFO LOG: 'You are running Vue in development mode.
    	Make sure to turn on production mode when deploying for production.
    	See more tips at https://vuejs.org/guide/deployment.html'
    
    	  build
    	    โœ“ returns a partially applied mount function
    	    โœ“ returns a partially applied mount function which takes an options object and callback
    	    โœ“ provides a default callback to mount
    	    โœ“ provides a default callback only when the 2nd argument is a function
    
    	  buildShallow
    	    โœ“ returns a partially applied shallow function
    
    	  fakeActions
    	    โœ“ returns a sinon stub for a given action
    	    โœ“ can assert against what arguments an action was dispatched with
    	    โœ“ can stub what the action returns using sinon
    	    โœ“ takes an object to stub multiple actions
    
    	  fakeGetters
    	    โœ“ returns a sinon stub for a given getter
    	    โœ“ takes an object to stub multiple getters
    
    	  hooks
    	    beforeEachHooks
    	      โœ“ appends a div element to body for mounting components
    	      โœ“ creates a wrapper div to which components are append when mounted
    	    afterEachHooks
    	      โœ“ removes the div element created by beforeEachHooks only if one exists
    	      โœ“ destroys mounted Vue instances only when they exists
    	      โœ“ resets Vue.config.ignoredElements from shallow rendering
    
    	  mount
    	    โœ“ mounts a basic component
    	    โœ“ mounts a component with props
    	    โœ“ mounts a component and listens for events
    	    โœ“ mounts a component with a slot
    	    โœ“ mounts a component with a default and named slots
    	ERROR LOG: '[Vue warn]: Error in render function: "Error: [VueUnit]: Error when rendering default slot:
    
    	[Vue warn]: Error compiling template:
    
    	Hello World
    
    	- Component template requires a root element, rather than just text.
    	"
    
    	(found in <Root>)'
    	ERROR LOG: Error{line: 3085, stack: '
    	[email protected][native code]
    	createSlots
    	render
    	_render
    	updateComponent
    	get
    	Watcher
    	mountComponent
    	$mount
    	$mount
    	mount
    
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4481:25
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4969:13
    	http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:5075:19
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4887:16
    	http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4897:11
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4821:16
    	http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4860:11
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4428:7
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4499:11
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4835:13
    	http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4865:9
    	[email protected]://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:82:27'}
    	    โœ— mounts a component with a default slot only with a text node
    	        Attempted to assign to readonly property.
    	        mount
    
    
    	    โœ— throws an Error when named slots are not parsed
    	        expected [Function: callMount] to throw error including 'Error when rendering named slot "foo"' but got 'Attempted to assign toreadonly property.'
    
    	    โœ— throws an Error for defaults slots which are not related to text node rendering
    	        expected [Function: callMount] to throw error including 'Error when rendering default slot' but got 'Attempted to assign to readonly property.'
    
    	    โœ“ mounts a component with provided dependencies
    	    โœ“ receives an optional callback which is passed the vm after mounting
    	    โœ“ receives an optional callback without any options
    	    โœ“ can also take an options object
    	    โœ“ can take an options object with a callback as well
    
    	  shallow
    	    โœ“ shallow renders locally registered components
    
    	  waitForUpdate
    	    โœ“ tests message updates
    
    	  mounting TestComponent
    	    โœ“ sets and changes props
    	    โœ“ listens for events
    	    โœ— renders slots
    	        Attempted to assign to readonly property.
    	        mount
    	        mount
    
    
    
    	    โœ— does all three
    	        Attempted to assign to readonly property.
    	        mount
    	        mount
    
    
    
    
    	  shallow rendering TestComponent
    	    โœ“ has a shallow rendered child
    	    โœ“ conditionally renders the child
    	    โœ“ can still be fully rendered
    
    	PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 38 of 38 (5 FAILED) (0.504 secs / 0.19 secs)
    	TOTAL: 5 FAILED, 33 SUCCESS
    
    
    	1) mounts a component with a default slot only with a text node
    	     mount
    	     Attempted to assign to readonly property.
    	mount
    
    
    	2) throws an Error when named slots are not parsed
    	     mount
    	     expected [Function: callMount] to throw error including 'Error when rendering named slot "foo"' but got 'Attempted to assign to readonly property.'
    
    	3) throws an Error for defaults slots which are not related to text node rendering
    	     mount
    	     expected [Function: callMount] to throw error including 'Error when rendering default slot' but got 'Attempted to assign to readonly property.'
    
    	4) renders slots
    	     mounting TestComponent
    	     Attempted to assign to readonly property.
    	mount
    	mount
    
    
    
    	5) does all three
    	     mounting TestComponent
    	     Attempted to assign to readonly property.
    	mount
    	mount
    
    Reviewed by ghost at 2017-09-17 06:36
  • 10. Configurable Render Depth

    An option to pass an arbitrary render depth for renderShallow would be very useful. This would allow for testing modules with dependent children / parent dependencies without rendering the whole component tree. The depth would be an integer and would recursively render children x levels deep.

    Reviewed by PapaStef at 2017-08-18 19:35
๐Ÿ”ฌ Utilities for testing Vue components

Vue Test Utils Vue Test Utils is the official testing library for Vue.js. Packages This repository provides the following two packages: Vue Test Utils

May 16, 2022
Component testing utils for Vue 3

Vue Test Utils Component testing utils for Vue 3. Installation and Usage yarn: yarn add @vue/test-utils --dev npm: npm install @vue/test-utils --save-

May 21, 2022
Vue Unit Test Helpers for server-side testing of client-side code

vuenit Vue Unit Test Helpers Vuenit is a testing utility that offers a number of useful methods to make testing Vue applications easier: Easily mount

Dec 8, 2021
Split Testing for Vue.js

vue-a2b split testing for Vuejs Usage Add the package to your project: yarn add vue-a2b # or npm install vue-a2b โ€ฆand register it to Vue: import VueAB

Mar 10, 2022
A tool for testing and debugging your Vue + Vuex applications.
A tool for testing and debugging your Vue + Vuex applications.

A tool for testing and debugging your Vue + Vuex applications.

Apr 15, 2022
โœ… Unit testing Vuex actions with Jest mocks.

โœ… Vue Test Actions Unit testing Vuex actions with Jest mocks. ?? Install npm i --save vue-test-actions or yarn add vue-test-actions ?? Usage import te

Feb 25, 2021
๐ŸŽ‰Front end of Sonic cloud real machine testing platform.
๐ŸŽ‰Front end of Sonic cloud real machine testing platform.

?? Front end of Sonic cloud real machine testing platform English | ็ฎ€ไฝ“ไธญๆ–‡ Official Website Sonic Official Website Background What is sonic ? Nowadays,

May 14, 2022
Testing utils for Vuex

This is a collection of test utilities for vuex. For actions you can check if things are commited or dispatched, and what their payload was.

Nov 28, 2020
Simple testing tools for vuejs

Simple testing tools for vuejs

Dec 5, 2021
Jest Serializer for Vue components
Jest Serializer for Vue components

jest-serializer-vue-tjw Jest Vue snapshot serializer Logo made by Aurora Wooton (age 14) Quotes: "This looks fantastic! This might sell me on testing.

Apr 7, 2022
Vue test selectors made easy
Vue test selectors made easy

Vue Hubble makes it simple to add selectors (only in your testing environment) and target component elements in tests without worrying about collisions, extraneous classes, etc.

Jan 9, 2022
Additional jest matchers for vue

jest-vue-matcher Additional jest matchers for vue Install yarn add jest-vue-matcher -D Setup import { mount } from '@vue/test-utils' import matchers

Dec 10, 2021
Simple Vue App - made for aveonline test

This template should help get you started developing with Vue 3 in Vite.

Mar 4, 2022
Component testing utilities for Vue.js

VueUnit A library for Vue.js that makes it easier to create and unit test components. Easily test props, events, and slots (including named slots) Opt

Apr 22, 2022
Utilities for testing Vue.js components using Jest

vue-jest-utils Utilities for testing Vue.js components using Jest. While written in TypeScript (and thus including type definitions), it can also be u

Feb 23, 2022
๐Ÿ”ฌ Utilities for testing Vue components

Vue Test Utils Vue Test Utils is the official testing library for Vue.js. Packages This repository provides the following two packages: Vue Test Utils

May 16, 2022
Vue Use Utilities build on top of vue-demi & @vue/compostion-api

Vue Use Utilities Vue Use Utilities build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3. โœจ Features ?? Composable Utilities ??

Apr 2, 2022
Collection of essential Vue Composition Utilities for Vue 2 and 3
Collection of essential Vue Composition Utilities for Vue 2 and 3

Collection of essential Vue Composition Utilities ?? Features ?? Interactive docs & demos ?? Seamless migration: Works for both Vue 3 and 2 โšก Fully tr

May 21, 2022
Vue LaunchDarkly plugin and routing utilities

Vue LaunchDarkly A simple wrapper around the js-client-sdk that provides observable feature flags, a ready state to ensure all feature flags are up to

Feb 15, 2022
Utilities from VueUse that work for @vue/reactivity

Utilities from VueUse that work for @vue/reactivity

Mar 14, 2022