vue-test-helpers
v2.0.0
Published
Helpers for vue-test-utils
Downloads
394
Maintainers
Readme
vue-test-helpers
Helpers and syntactic sugars on top of vue-test-utils.
Install
First install the package with yarn or npm:
$ yarn add vue-test-helpers --dev
Also you'll need a peer dependency of vue-test-utils
. Install it with:
$ yarn add @vue/test-utils --dev
Then, before your tests (for example in a setup script), import and call the function:
import setupHelpers from 'vue-test-helpers'
setupHelpers()
This will do two things:
- By default, make
mount
andshallowMount
(also aliased asshallow
) available globally, so you don't need to manuallyimport { mount, shallowMount } from '@vue/test-utils'
at the beginning of every test file. If this behavior is not what you want, just callsetupHelpers({ registerGlobals: false })
instead. - Add some helpers and syntactic sugars on top of
Wrapper
to create your test a better experience. See the next section for details.
Available helpers
These helpers are available on
Wrapper
instances only, since I'm not a fan ofWrapperArray
which is just a very thin wrapper around an array ofWrapper
's. If you are dealing with aWrapperArray
, just iterate through its.wrappers
collection and run the helpers on each item.
.has(selector)
: alias for.contains(selector)
expect(wrapper.has('p')).toBe(true)
expect(wrapper.has('#foo')).toBe(true)
expect(wrapper.has(childComponent)).toBe(false)
.hasAll|containsAll(...selectors)
: asserts that the wrapper has all provided selectors
expect(wrapper.hasAll('p', '#foo', childComponent)).toBe(false)
.hasAny|containsAny(...selectors)
: asserts that the wrapper has any of the provided selectors
expect(wrapper.hasAny('p', '#foo', childComponent)).toBe(true)
.hasNone|containsNone(...selectors)
: asserts that the wrapper has none of the provided selectors
expect(wrapper.hasNone('p', '#foo', childComponent)).toBe(false)
.hasClass|hasClasses(...classes)
: asserts that the wrapper has the CSS class(es).
expect(wrapper.find('.foo').hasClass('foo')).toBe(true)
expect(wrapper.find('.foo.bar').hasClasses('foo', 'bar')).toBe(true)
.hasAttribute(name, value)
: asserts that the wrapper has an attributename
with the valuevalue
expect(wrapper.find('[foo="bar"]').hasAttribute('foo', 'bar')).toBe(true)
.hasProp(name, value)
: asserts that the wrapper has a propname
with the valuevalue
expect(wrapper.hasProp('foo', 'bar')).toBe(true)
Note:
hasClass
,hasAttribute
, andhasProp
are actually available invue-test-utils
, but marked as deprecated and will be removed in 1.0.
.hasEmitted(name[, value])
: asserts that an eventname
has been emitted, optionally with a valuevalue
wrapper.vm.$emit('foo', 'bar')
expect(wrapper.hasEmitted('foo')).toBe(true)
expect(wrapper.hasEmitted('foo', 'bar')).toBe(true)
.id()
: gets the id of the contained element
expect(wrapper.find('#foo').id()).toBe('foo')
.click|dblclick|input|submit|focus|blur|change([options])
: triggers the click/dblclick/input/submit/focus/blur/change event on the contained element, optionally with anoptions
object. These methods return the wrapper instance, useful for chaining.
expect(wrapper.click().hasEmitted('clicked')).toBe(true)
expect(wrapper.click({ button: 1 }).hasEmitted('rightClicked')).toBe(true)
.click|dblclick|input|submit|focus|blur|change(selector[, options])
: finds the contained element byselector
and triggers the click/dblclick/input/submit/focus/blur/change event on it, optionally with anoptions
object. These methods return the wrapper instance, useful for chaining.
expect(wrapper.click('button').hasEmitted('buttonClicked')).toBe(true)
expect(wrapper.click('button', { ctrlKey: true }).hasEmitted('buttonCtrlClicked')).toBe(true)
.setValue(value)
: sets the value of the contained (input) element. This method returns the called instance, useful for chaining.
wrapper.find('input').setValue('foo').change()
.getValue()
: gets the value of the contained (input) element
expect(wrapper.find('input').setValue('foo').getValue()).toBe('foo')
.value
: a proxy for the value of the contained (input) element
wrapper.find('input').value = 'foo'
expect(wrapper.find('input').value).toBe('foo')
License
MIT © Phan An