VueJS: Unit test
Giải phóng thời gian, khai phóng năng lực
Setup
To perform unit test with Vue, you can use any test tool matching with build system base on module. However, we recomend you should using Karma. Karma has many plugins support Webpack and Browserify. To learn more about seting up Karma and these plugins, please see the ducument. You can also start by referencing examples about configuration for Webpack and Browserify.
Simple asserts
You do not need what special to do for component to test. You only need export
base options:
<template> <span>{{ message }}</span> </template> <script> export default { data () { return { message: 'hello!' } }, created () { this.message = 'bye!' } } </script>
Then import
Vue and component, so you could perform common assertions:
// Import Vue and component need test import Vue from 'vue' import MyComponent from 'path/to/MyComponent.vue' // There are some test statements using Jasmine 2.0 // Ofcourse you can use any test libraries // you want describe('MyComponent', () => { // Checking options of component it('has a created hook', () => { expect(typeof MyComponent.created).toBe('function') }) // Computing return value of function in option // of component it('sets the correct default data', () => { expect(typeof MyComponent.data).toBe('function') const defaultData = MyComponent.data() expect(defaultData.message).toBe('hello!') }) // Checking component object when `mount` it('correctly sets the message when created', () => { const vm = new Vue(MyComponent).$mount() expect(vm.message).toBe('bye!') }) // `mount` an object and testing render result it('renders the correct message', () => { const Constructor = Vue.extend(MyComponent) const vm = new Constructor().$mount() expect(vm.$el.textContent).toBe('bye!') }) })
Writing component can test
Result render of one component is decided most by props
it received. If result render of component only depends on props, testing is very easy, it sames to testing return value of common function with deference parameters. Here is simple example:
<template> <p>{{ msg }}</p> </template> <script> export default { props: ['msg'] } </script>
You can test result render với deference props of this component by using propsData
option:
import Vue from 'vue' import MyComponent from './MyComponent.vue' // helper function that mounts and returns the rendered text function getRenderedText (Component, propsData) { const Constructor = Vue.extend(Component) const vm = new Constructor({ propsData: propsData }).$mount() return vm.$el.textContent } describe('MyComponent', () => { it('renders correctly with different props', () => { expect(getRenderedText(MyComponent, { msg: 'Hello' })).toBe('Hello') expect(getRenderedText(MyComponent, { msg: 'Bye' })).toBe('Bye') }) })
Async update with assert
Since Vue Do Vue perform async update withDOM, with changes on DOM because of changes state, you must perform assert in Vue.nextTick
callback function:
// Checking HTML created after update state it('updates the rendered message when vm.message updates', done => { const vm = new Vue(MyComponent).$mount() vm.message = 'foo' // waiting a "tick" after changing state // then executing assert updates on DOM Vue.nextTick(() => { expect(vm.$el.textContent).toBe('foo') done() }) })
We are planning perform a collection about tool/helper functions to support for rendering component with other conditions (e.x. no-deep rendering – shallow render, do not care subcomponent) and output assert is more easy.
For more information about unit test in Vue, see vue-test-utils and an article about unit testing Vue component trong cookbook.
Giải phóng thời gian, khai phóng năng lực