## 配置和工具 任何兼容基于模塊的構建系統都可以正常使用，但如果你需要一個具體的建議，可以使用 [Karma](https://karma-runner.github.io) 進行自動化測試。它有很多社區版的插件，包括對 [Webpack](https://github.com/webpack/karma-webpack) 和 [Browserify](https://github.com/Nikku/karma-browserify) 的支持。更多詳細的安裝步驟，請參考各項目的安裝文檔，通過這些 Karma 配置的例子可以快速幫助你上手 ([Webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) 配置，[Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) 配置)。 ## 簡單的斷言 你不必為了可測性在組件中做任何特殊的操作，導出原始設置就可以了： ``` html <template> <span>{{ message }}</span> </template> <script> export default { data () { return { message: 'hello!' } }, created () { this.message = 'bye!' } } </script> ``` 然后隨著 Vue 導入組件的選項，你可以使用許多常見的斷言： ``` js // 導入 Vue.js 和組件，進行測試 import Vue from 'vue' import MyComponent from 'path/to/MyComponent.vue' // 這里是一些 Jasmine 2.0 的測試，你也可以使用你喜歡的任何斷言庫或測試工具。 describe('MyComponent', () => { // 檢查原始組件選項 it('has a created hook', () => { expect(typeof MyComponent.created).toBe('function') }) // 評估原始組件選項中的函數的結果 it('sets the correct default data', () => { expect(typeof MyComponent.data).toBe('function') const defaultData = MyComponent.data() expect(defaultData.message).toBe('hello!') }) // 檢查 mount 中的組件實例 it('correctly sets the message when created', () => { const vm = new Vue(MyComponent).$mount() expect(vm.message).toBe('bye!') }) // 創建一個實例并檢查渲染輸出 it('renders the correct message', () => { const Constructor = Vue.extend(MyComponent) const vm = new Constructor().$mount() expect(vm.$el.textContent).toBe('bye!') }) }) ``` ## 編寫可被測試的組件 很多組件的渲染輸出由它的 props 決定。事實上，如果一個組件的渲染輸出完全取決于它的 props，那么它會讓測試變得簡單，就好像斷言不同參數的純函數的返回值。看下面這個例子： ``` html <template> <p>{{ msg }}</p> </template> <script> export default { props: ['msg'] } </script> ``` 你可以在不同的 props 中，通過 `propsData` 選項斷言它的渲染輸出： ``` js import Vue from 'vue' import MyComponent from './MyComponent.vue' // 掛載元素并返回已渲染的文本的工具函數 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') }) }) ``` ## 斷言異步更新 由于 Vue 進行 [異步更新 DOM](reactivity.html#異步更新隊列) 的情況，一些依賴 DOM 更新結果的斷言必須在 `Vue.nextTick` 回調中進行： ``` js // 在狀態更新后檢查生成的 HTML it('updates the rendered message when vm.message updates', done => { const vm = new Vue(MyComponent).$mount() vm.message = 'foo' // 在狀態改變后和斷言 DOM 更新前等待一刻 Vue.nextTick(() => { expect(vm.$el.textContent).toBe('foo') done() }) }) ``` 我們計劃做一個通用的測試工具集，讓不同策略的渲染輸出 (例如忽略子組件的基本渲染) 和斷言變得更簡單。 關于更深入的 Vue 單元測試的內容，請移步 [vue-test-utils](https://vue-test-utils.vuejs.org/zh/) 以及我們關于 [Vue 組件的單元測試](../cookbook/unit-testing-vue-components.html)的 cookbook 文章。