您好,登錄后才能下訂單哦!
Vue中怎么利用case實現(xiàn)單元測試,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
測試關(guān)注點
對于vue組件,單元測試測試主要關(guān)注以下幾點:
vue組件加載后,各數(shù)據(jù)模型是否符合預(yù)期
定義的方法是否可用
filter是否可用
帶有props的組件,數(shù)據(jù)能否正常傳遞
異步更新DOM的情況
組件加載后的狀態(tài)
要測試組件加載后的狀態(tài),首先我們需要將vue組件生成實例。并檢測掛載后實例的數(shù)據(jù)狀態(tài)。下面是個示例:
我們來看下src/app.vue
組件的代碼:
<template> <div> <h2>{{title}}</h2> <vc-message :message="message"></vc-message> </div> </template> <script> import child from './components/child.vue' export default { data() { return { title: '標題', message: '這是子組件' } }, components: { 'vc-message': child }, mounted() { this.title = 'Hello world' }, methods: { setMessage(msg) { this.message = msg; } } } </script>
組件加載后title的值應(yīng)該變成'Hello world',所以我們這樣來寫測試代碼
// 引用vue import Vue from 'vue'; // 引用要測試的組件 import app from '../../src/app.vue'; // 描述要測試的內(nèi)容 describe('test app.vue', () => { // 描述要測試的最小單元 it('組件加載后,title應(yīng)該是Holle world', () => { // 這里將app生成vue實例,并使用 $mount() 模擬掛載狀態(tài) let vm = new Vue(app).$mount(); // 斷言組件的title是否變?yōu)榱?#39;Hello world' expect(vm.title).toEqual('Hello world'); }); });
執(zhí)行karma start
我們能看到測試通過。
測試組件里面的方法
我們知道vue將data和methods都掛在了vue實例的根節(jié)點下,所以測試vue組件中的方法也和上面測試狀態(tài)一樣,直接調(diào)用vm的方法就行了。我們來測試以下setMessage方法:
// 引用vue import Vue from 'vue'; // 引用要測試的組件 import app from '../../src/app.vue'; // 描述要測試的內(nèi)容 describe('test app.vue', () => { // 描述要測試的最小單元 it('設(shè)置message為『你好世界』', () => { // 這里將app生成vue實例,并使用 $mount() 模擬掛載狀態(tài) let vm = new Vue(app).$mount(); // 執(zhí)行setMessage方法 vm.setMessage('你好世界'); // 斷言組件的message是否變?yōu)榱?#39;你好世界' expect(vm.message).toEqual('你好世界'); }); });
執(zhí)行karma start,就會看到測試成功。如果剛才沒有關(guān)閉karma的話,在watch模式下,測試會自動進行。
怎么樣?有沒有感覺vue單元測試非常簡單,趕緊做起來吧。
filter測試
filter的測試就更簡單了。filter就是純函數(shù),有固定的輸入輸出,我們只需要執(zhí)行函數(shù)看預(yù)期結(jié)果就好了。我們?yōu)榻M件添加一個轉(zhuǎn)換大寫的filter:
<template> ... <h2>{{title | upperCase}}</h2> ... </template> <script> ... filters: { upperCase(str) { return str.toUpperCase(); } } ... </script>
測試這個filter
// 引用要測試的組件 import app from '../../src/app.vue'; // 描述要測試的內(nèi)容 describe('test app.vue', () => { it('upperCase過濾器能把app轉(zhuǎn)換為APP', () => { // vue 組件export出來的是個對象,我們直接用這個對象的屬性和方發(fā)就能調(diào)用到要測試的filter let appStr = app.filters.upperCase('app'); // 斷言組件的appStr是為'APP' expect(appStr).toEqual('APP'); }); })
props測試
props依賴父組件,這個怎么測試呢。我們來看下vue官方提供的方法
使用Vue.extend()將組件掛載Vue構(gòu)造器上,用propsData加入props數(shù)據(jù),之后new一個Vue實例,這樣就生成了一個獨立的帶props的vm和前面的實例一樣,可以進行各種測試。
我們的child組件:
<template> <div> <div>{{message}}</div> </div> </template> <script> export default { props: ['message'] } </script>
測試child組件
// 引用vue import Vue from 'vue'; // 引用要測試的組件 import child from '../../src/components/child.vue'; /** * 獲取生成的vm * * @param {Object} Component 組件 * @param {Object} propsData props數(shù)據(jù) * @return {Object} vue實例 */ function getRenderedVm (Component, propsData) { const Ctor = Vue.extend(Component) const vm = new Ctor({ propsData }).$mount() return vm } // 描述要測試的內(nèi)容 describe('test child.vue', () => { // 描述要測試的最小單元 it('組件加載后,child組件的message應(yīng)該是「這是子組件」', () => { let childvm = getRenderedVm(child, { message: '這是message' }); // 斷言組件的child組件的props是否生效 expect(childvm.message).toEqual('這是message'); }); });
是不是so easy.
異步更新DOM的情況
異步更新DOM的情況,參考vue官網(wǎng)的示例
使用Vue.nextTick來查看異步數(shù)據(jù)更新后dom是否變化
// 引用vue import Vue from 'vue'; // 引用要測試的組件 import app from '../../src/app.vue'; // 描述要測試的內(nèi)容 describe('test app.vue', () => { // 異步數(shù)據(jù)更新 it('數(shù)據(jù)更新后,視圖應(yīng)該改變', done => { // 這里將app生成vue實例,并使用 $mount() 模擬掛載狀態(tài) let vm = new Vue(app).$mount(); // 掛載后改變title vm.title = 'APP'; Vue.nextTick(() => { let title = vm.$el.getElementsByTagName('h2')[0] expect(title.textContent).toEqual('APP') done(); }) }); });
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。