jest-matcher-vue-test-utils
Cute matchers for Jest to test Vue components with Vue Test Utils.
You can write tests for Vue component/store intuitively ⚡️
it"Emits 'select' event by clicking PrimaryButton",;
becomes
it"Emits 'select' event by clicking PrimaryButton",;
And all matchers have type definition and doc 💇♂️
Installation
Get from npm:
$ npm install -D jest-matcher-vue-test-utils
Then, register matchers on your jest process:
;expect;
Provided Matchers
Existence on Wrapper
toShow
Assert the function shows a content on Wrapper of vue-test-utils
// error-message.vue<template> <div> <p v-if="isError" class="error">message</p> </div></template> ... { return isError: false }methods: { thisisError = true; }
; ;
toHide
Assert the function hides a content on Wrapper of vue-test-utils
// error-message.vue<template> <div> <p v-if="isError" class="error">message</p> </div></template> ... { return isError: true }methods: { thisisError = false; }
; ;
Events on Wrapper
toEmit
Assert the action emits the event (with the payload optionally) on Wrapper of vue-test-utils
// event.vue<template> <div @click="emitEvent('clicked')"> Click Me </div></template> <script>moduleexports = methods: { this; } </script>
; ;
Async function is supported as well.
;
toHaveEmitted
Assert the event is emitted (with the payload optionally) on Wrapper of vue-test-utils
// event.vue<template> <div @click="emitEvent('clicked')"> Click Me </div></template> <script>moduleexports = methods: { this; } </script>
; ;
Vuex actions/mutations
toDispatch
Assert the function dispatches Vuex action on the component
// click-store.vue<template> <div @click="dispatchStore('click')"> Click Me </div></template> <script>moduleexports = methods: { this$store; } </script>
; ;
Async function is supported as well.
;
toCommit
(TBD)
Assert the store mutation is committed
// click-store.vue<template> <div @click="commitStore('click')"> Click Me </div></template> <script>moduleexports = methods: { this$store; } </script>
; ;
toHaveDispatched
Assert a component has dispatched Vuex action
// click-store.vue<template> <div @click="dispatchStore('click')"> Click Me </div></template> <script>moduleexports = methods: { this$store; } </script>
;; ;
Prop Validations
toBeValidProps
Assert that a prop set is valid for a component
// name-require-and-fullname-is-validated-component.vueprops: name: type: String required: true fullname: { return !!val && val; }
; ;
toBeValidProp
Assert that a single prop is valid for a component
// name-require-component.vueprops: name: type: String required: true
; ;
toRequireProp
Assert that a component requires a prop
// name-require-component.vueprops: name: type: String required: true
; ;
toHaveDefaultProp
Assert that a component gives default to a prop
// default-address-component.vueprops: address: type: String default: "Kitakyushu, Japan"
; ;
toBeValidPropWithTypeCheck
Assert that a component validates a prop with type
// takes-zipcode-component.vueprops: zipcode: type: String
; ;
toBeValidPropWithCustomValidator
Assert that a component validates a prop with custom validator
// fullname-is-validated-component.vueprops: fullname: { return !!val && val; }
; ;
Config
We can configure the matchers. Currently accepting mountOptions property to give options for shallowMount
which is running in inside of matchers.
;; ;
License
MIT, Copyright (c) 2018- Kengo Hamasaki