Vue 單元測試 使用mocha+jest

来源:https://www.cnblogs.com/NB-JDzhou/archive/2019/10/31/11772497.html
-Advertisement-
Play Games

[toc] Vue 單元測試 "官網：https://vue test utils.vuejs.org/zh" 定義： 單元測試是用來對一個模塊、一個函數或者一個類來進行正確性檢驗的測試工作。 指令： package.json文件 "test:unit": "vue cli service test ...


目錄

Vue 單元測試

官網：https://vue-test-utils.vuejs.org/zh

定義：

單元測試是用來對一個模塊、一個函數或者一個類來進行正確性檢驗的測試工作。

指令：
package.json文件

  • "test:unit": "vue-cli-service test:unit"

測試驅動開發（TDD：Test-Driven Development）

mocha+jest

jest

實例 mocha expect方法斷言

  • 格式模板

    describe 套件

        describe('名稱',()=>{
        <!-- 用例 -->
        it('方法描述',()=>{
            /* 使用expect 斷言語句 */
            /* 方法舉例 */
            expcect(/* 需要檢測的方法 */).to.be.equal(/* 檢測結果 */)
        })
    })

  • 描述

    it()

測試非同步代碼 通過將回調（通常稱為done）添加到it()

.to.be.equal 是否相等
.to.be.deep.equal 是否嚴格相等

示例代碼

tests\unit\parser.spec.ts

  1. 測試各類斷言語句執行成功或者失敗

    /* 編寫測試用例 */
import {parser,stringify} from '@/code/parser';
/* 使用mocha(測試工具) +chai(斷言庫) */
import { expect } from 'chai';
/* 套件 */
describe('mytest1', () => {
    /* 用例 */
    // 常見的關係 相等 大於/小於 包含和不包含
    it('測試parser方法是否可用',()=>{
        // deep.equal 表示兩個對象是否完全相等（引用空間無所謂）
        // .to.be.equal 表示兩個對象相等（引用空間無所謂）
        expect(parser('name=zfpx')).to.be.deep.equal({name:'zfpx'})
    })
    it('測試stringify方法是否可用',()=>{
        expect(stringify({name:'3px'})).to.be.equal('name=3px')
    })
})
/* 斷言語句各類 */
describe('測試方法',()=>{
    it('相等關係',()=>{
        expect(1+1).to.be.equal(2);//相加的值
        expect([1,2,3]).to.be.lengthOf(3);//長度
        expect(true).to.be.true;//布爾值
    })
    it('包含',()=>{
        expect('zfpx').to.be.contain('zf');//是否包含指定字元
        expect('zfpx').to.be.match(/zf/);//是否匹配正則

    })
    it('大於，小於',()=>{
        expect(5).to.be.greaterThan(3)
        expect(3).to.be.lessThan(6)
        expect(3).to.be.not.greaterThan(5)//不大於3
    })
})

  2. 測試模塊是否正確渲染值

    src\components\unittest\demo1.vue

    <!-- 單元測試：是否能成功顯示渲染的組件元素  -->
<template>
<div class="demo1">
    <h1>{{ datas }}</h1>
</div>
</template>

<script>
export default {
    name:'demo1',
    props:['datas'],
    data () {
        return {

        };
    }
}

</script>
<style lang='less' scoped>
</style>

    tests\unit\unit1.spec.ts

    import unitdemo1 from '@/components/unittest/demo1.vue';
import Vue from 'vue';
import {expect} from  'chai';
import {mount} from  '@vue/test-utils';
/* 寫法1 產地屬性後能否正常顯示結果*/
describe('unitdemo1',()=>{
    it('1.傳遞屬性後能否正常顯示結果',()=>{
        // 原生自己測試vue
        // extend 方法可以根據實例創建一個類
        let Constructor = Vue.extend(unitdemo1);
        // 對組件進行掛載
        // vm.$el mocha 測試的時候集成了 jsdom
        let vm:any = new Constructor({
            propsData:{datas:'hello'}
        }).$mount();

        /* 檢測h1標簽內是否包含hello */

        expect(vm.$el.querySelector('h1').innerHTML).to.be.contain('hello');
    })
})
/* 寫法2 使用mount */
describe('unitdemo1',()=>{
    it('2.傳遞屬性後能否正常顯示結果',()=>{
        let wrapper = mount(unitdemo1);
        /* 設置 Wrapper vm 的 prop 並強制更新。
        https://vue-test-utils.vuejs.org/zh/api/wrapper/setProps.html
        */
        wrapper.setProps({datas:'hello'});//設定傳遞的值為hello
        expect(wrapper.find('h1').text()).to.be.contain('hello');
    })
})

  3. 測試模塊內的加法是否執行

    src\components\unittest\demo2.vue

    <!--  -->
<template>
<div>
    <span id="count">{{count}}</span>
    <button @click = "increment">+</button>
</div>
</template>
<script>
//這裡可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
//例如：import 《組件名稱》 from '《組件路徑》';

export default {
//import引入的組件需要註入到對象中才能使用
components: {},
data() {
    //這裡存放數據
    return {
        count:10
    };
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的數據變化
watch: {},
//方法集合
methods: {
    increment(){
        this.count++
    }
},
//生命周期 - 創建完成（可以訪問當前this實例）
created() {},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 創建之前
beforeMount() {}, //生命周期 - 掛載之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之後
beforeDestroy() {}, //生命周期 - 銷毀之前
destroyed() {}, //生命周期 - 銷毀完成
activated() {} //如果頁面有keep-alive緩存功能，這個函數會觸發
};
</script>
<style lang='lesss' scoped>
/* //@import url(); 引入公共css類 */
</style>

    tests\unit\unit2.spec.ts

    import unitdemo2 from '@/components/unittest/demo2.vue';
import Vue from 'vue';
import {expect} from  'chai';
import {mount} from  '@vue/test-utils';

/* 寫法2 使用mount */
describe('測試demo2組件',()=>{
    it('單機能否+1',()=>{
        let wrapper = mount(unitdemo2);
        expect(wrapper.find('#count').text()).to.be.equal('10');
        wrapper.find('button').trigger('click');
        expect(wrapper.find('#count').text()).to.be.equal('11');
    })
})

    測試代碼執行：npm run test:unit

測試結果


     DONE  Compiled successfully in 3577ms

    [=========================] 100% (completed)

    WEBPACK  Compiled successfully in 3577ms

    MOCHA  Testing...

    { name: 'zfpx' }
    name=zfpx


    mytest1
        √ 測試parser方法是否可用
        √ 測試stringify方法是否可用

    測試方法
        √ 相等關係
        √ 包含
        √ 大於，小於

    unitdemo1
        √ 1.傳遞屬性後能否正常顯示結果

    unitdemo1
        √ 2.傳遞屬性後能否正常顯示結果

    測試demo2組件
        √ 單機能否+1


    8 passing (111ms)

    MOCHA  Tests completed successfully

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vue-cli項目部署到Nginx
    項目環境： 0. Nginx使用 以windows版為例，下載niginx壓縮包並解壓到任意目錄，雙擊 ，在瀏覽器中訪問 ，如果出現 頁面則說明成功。 nginx常用命令如下： 1. 部署項目到Nginx根目錄 對於vue cli創建的項目，修改 文件（位於項目根目錄下，沒有的話自行創建）： 在vu ...
  • angularjs總結
    AngularJS是一款由Google公司開發維護的前端MVC框架，其剋服了HTML在構建應用上的諸多不足，從而降低了開發成本提升了開發效率。 特點 AngularJS與我們之前學習的jQuery是有一定的區別的，jQuery更準確來說只一個類庫（類庫指的是一系列函數的集合）以DOM做為驅動（核心） ...
  • CSS文本屬性
    CSS文本屬性 1. CSS Text（文本）屬性定義文本的外觀，比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等 2. 文本顏色 color屬性定義文本的顏色 ~~~html div{ color:red; } ~~~ | 表示 | 屬性值 | | | | | 預定義顏色值 | red、gr ...
  • CSS字體屬性
    CSS字體屬性 1. CSS Fonts（字體）屬性擁有定義字體系列、大小、粗細和文字樣式（如斜體） 2. 字體系列 ~~~html div{ font family:"Microsoft Yahei"; } ~~~ 【註意】 各種字體之間必須使用英文狀態下逗號隔開 一般情況下，如果有空格隔開的多個 ...
  • 關於基本類型和引用類型的個人理解
    1.基礎類型 A. 基礎類型有5種，Number，String，Boolean，Null，Undefined B. 基礎類型沒有堆的概念，堆只針對引用類型。 所有基礎類型都是以key-value形式存放在棧中，其中，基礎類型的值不可變，除非是重新賦值， 比如： 2.引用類型 引用類型，如Array， ...
  • element-ui開始日期結束日期限制
    鏈接如下： https://blog.csdn.net/qq_33769914/article/details/83856268 https://www.cnblogs.com/YuKiee/p/9651240.html ...
  • Webpack 入門教程
    Webpack 是一個前端資源載入/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。 基於 Webpack3.0 測試通過。 從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。 接下來我 ...
  • tree 樹形載入及增刪改
    //非同步1<template> <div class="addequipment org"> <div class="top"> <div class="topfirst">菜單管理</div> <div class="addequi" @click='addNew'>添加</div> </div>... ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類