Unit Testing in Vue – the Essentials
WHAT's A "UNIT?" 🧐
Intuitively, one can view a unit as the smallest testable part of an application. In procedural programming, a unit could be an entire module, but it is more commonly an individual function or procedure. In object-oriented programming, a unit is often an entire interface, such as a class, but could be an individual method.
When testing in Vue, generally a unit is a component.
—Wikipedia
INTRODUCING Vue-test-utils 💣
- Official testing utility library for Vue
- Currently in BETA
- Have official examples for Jest, Mocha, tape, and AVA
- github.com/vuejs/vue-test-utils
LIVE DEMO: COUNTER 🔢
https://github.com/phanan/counter-meetup
SHALLOW() & MOUNT() 🏞
- create a wrapper contains the mounted & rendered component
- with
shallow(), child components are stubbed
WRAPPER & WRAPPERARRAY 🍬
- wraps around a component, a vnode, or wrappers themselves
- provides methods to test the wrapped object(s): contains(), exists(), html(), is() etc.
import { shallow } from '@vue/test-utils'
import Counter from '@/components/Counter'
describe('Counter.vue', () => {
it('renders', () => {
const wrapper = shallow(Counter)
expect(wrapper.contains('.result')).toBe(true)
})
})component ≈ black box 📦
Assert a component's public interface, not its implementation details
wrapper.vm.inc()
// this won't work anyway
expect(wrapper.find('.result').text()).toBe('1')wrapper.find('button').trigger('click')
expect(wrapper.find('.result').text()).toBe('1')
MOCKING 🕵
- Set props manually with
propsDataorsetProps() - Set data manually with mount/shallow options or
setData() - Sinon/Jest mock functions for external API/dependency mocking
SNAPSHOT TESTING 📸
- Compare rendered HTML with previously generated snapshot
- Natively supported (Jest/AVA) or available as plugins (Mocha/tape)
- Call
renderToString(Foo), which usesvue-server-renderer - Remember to commit your snapshots!
VUE-TEST-HELPERS 🛠
- Provides useful shortcuts and functions on top of vue-test-utils
- github.com/phanan/vue-test-helpers
import Counter from '@/components/Counter'
describe('Counter.vue', () => {
it('renders', () => {
expect(shallow(Counter).contains('.result', 'button')).toBe(true)
}
it('counts', () => {
expect(shallow(Counter).click('button').find('.result').text()).toBe('1')
}
}that's it for now! 🙌
github.com/phanan
twitter.com/notphanan
phanan.net
Unit Testing in Vue – The Essentials
By Phan An
