js單元測試

来源:https://www.cnblogs.com/zhanghaiyu-Jade/archive/2019/03/16/10542511.html
-Advertisement-
Play Games

最近研究了js的單元測試,分享一下心得。 說起單元測試以前還真是不太瞭解,這次索性瞭解一番,測試有很多包含單元測試,性能測試,安全測試和功能測試等幾方面,本次只介紹一下單元測試。 前端進行單元測試主要是為了提高自己的代碼質量,多組測試用例,驗證自己的代碼是否都能通過,這是在開發中很有必要的。需要倡導 ...


最近研究了js的單元測試,分享一下心得。

說起單元測試以前還真是不太瞭解,這次索性瞭解一番,測試有很多包含單元測試,性能測試,安全測試和功能測試等幾方面,本次只介紹一下單元測試。

前端進行單元測試主要是為了提高自己的代碼質量,多組測試用例,驗證自己的代碼是否都能通過,這是在開發中很有必要的。需要倡導的是‘開發者應該吃自己的狗糧’,*——*

單元測試主要包含斷言,測試框架,測試用例等幾個方面,

斷言:

斷言是對代碼結果的一種判斷,如果這種判斷和結果是一樣的,那麼這個斷言就是真的,測試就通過了,如果為假的,程式就會終止執行,並出現錯誤信息。

斷言庫有很多expectshould,chai,其次就是node的assert斷言,本次主要說assert斷言

var assert=require('assert');
assert.equal(Math.max(1,100),100);

一但assert.equal()不滿足期望,將會拋出AssertionError異常,整個程式將停止執行。

斷言規範中,我們定義一下幾種檢測方法:
ok()判斷結果是否為真,

equal()判斷實際值與期望值是否相等,

notEqual():判斷實際值與期望值是否不相等

deepEqual():判斷實際值與期望值是否深度相等(對象和數組的元素是否相等)

notDeepEqual:判斷實際值與期望值是否不深度相等

strictEqual:判斷實際值與期望值是否嚴格相等(===)

notStrictEqual:判斷實際值與期望值是否不嚴格相等(相當於!==)

throws:判斷代碼塊是否拋出異常

市面上的大多斷言庫都是基於assert模塊進行封裝和擴展的,這包括著名的should.js斷言庫

安裝:

npm install  should  --save-dev 

 

測試框架

前面提到斷言一旦檢查失敗,將會拋出異常停止整個應用,這對於大規模的斷言檢查時並不友好,更通用的就是拋出異常並且繼續執行,最後生成測試報告,這任務承擔著就是測試框架,優秀的單元測試框架是mocha(發音:摩卡),mocha本身不含有斷言庫,所以必須先引入斷言庫,像上面提到的斷言庫,不限於使用哪種。

安裝:

npm install mocha -g(全局安裝)

測試風格:

TDD(測試驅動開發)和BDD(行為驅動開發)這兩種,他們的不同是什麼?

TDD關註多有功能是否被正確的實現,每個功能都具備對於的測試用例;BDD關註整體行為是否符合規格預期,適合自頂向下的設計方式

TDD表達方式偏向於功能說明書的風格;BDD的表達方式更接近於自己的語言習慣

我個人比較習慣BDD風格方式:

主要採用describe和it進行組織,一個測試腳本與所要測試的源碼腳本同名,但是尾碼名為.test.js(表示測試)或者.spec.js(表示規格),比如,add.js的測試腳本名字就是add.test.js

 

// add.test.js  測試腳本名字
var add = require('../lib/add');

describe('add', function () {
  it('6 + 7 = 13', function () {
    add(6,7).should.equal(13)
  })
  
  it('9 + 10 = 19', function () {
    add(9 , 10).should.equal(19)
  }) 
})

一個測試腳本由一個或多個describe測試套件組成,一個測試套件由一個或多個it測試用例組成,

describe塊稱為"測試套件"(test suite),表示一組相關的測試。它是一個函數,第一個參數是測試套件的名稱("add"),第二個參數是一個實際執行的函數。

it塊稱為"測試用例"(test case),表示一個單獨的測試,是測試的最小單位。是一個函數,第一個參數是測試用例的名稱("6 + 7 = 13"),第二個參數是一個實際執行的函數。

mocha基本用法

有了測試腳本就可以使用mocha運行它

mocha命令後面緊跟測試腳本的路徑和文件名,可以指定多個測試腳本。

mocha file1 file2 file3

註意:mocha預設運行test子目錄第一層的測試用例,不會執行更下層的用例。

例如:test文件下有個dir目錄,裡面有個測試腳本add.test.js,這是執行不到的,為了改變這種行為,就必須加上--recursive參數,這時test子目錄下麵所有的測試用例都會執行。

對於es6,需要經過編譯後才可以進行測試,

轉碼需要安裝

npm install babel-core babel-preset-es2015 --save-dev

然後 在根目錄下麵創建babelrc,配置:

{
  "presets": [ "es2015" ]
}

註意,Babel預設不會對Iterator、Generator、Promise、Map、Set等全局對象,以及一些全局對象的方法(比如Object.assign)轉碼。如果你想要對這些對象轉碼,就要安裝babel-polyfill

npm install babel-polyfill --save-dev

使用時候需要導入

import 'babel-polyfill'

測試工具

karma則屬於測試工具,能夠模擬各種環境來運行你的測試代碼,比如Chrome,Firefox,mobile等等。

(提一下:travis ci,是一個遠程免費的持續集成(CI)服務,你可以通過配置綁定你github上的項目,並且配置運行環境,實現只要github上有代碼更新,travis就會自動運行構建和測試,並反饋運行結果。)

使用karma

步驟
全局安裝 karma
npm install -g karma-cli
安裝所有依賴
......
初始化測試
karma init
    1. Which testing framework do you want to use ? (mocha)
    2. Do you want to use Require.js ? (no)
    3. Do you want to capture any browsers automatically ? (Chrome)
    4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
    5. Should any of the files included by the previous patterns be excluded ? ()
    6. Do you want Karma to watch all the files and run the tests on change ? (yes)
啟動測試
karma start

karma.conf.js:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'], //使用的框架
    files: [ //依賴模塊
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.js',
      'node_modules/should/should.js',
      'test/**/*.js',
      'src/**/*.js'
    ],
    exclude: [//排除文件列表
    ],
    preprocessors: {
    },
    reporters: ['progress'],

    port: 9876,//服務埠號

    colors: true,//啟用或禁用輸出報告或者日誌中的顏色

    logLevel: config.LOG_INFO,

    autoWatch: true, //啟用或禁用自動檢測文件變化進行測試

    browsers: ['Chrome'], //測試啟動的瀏覽器
    singleRun: false,//開啟或禁用持續集成模式  設置為true, Karma將打開瀏覽器,執行測試並最後退出
    concurrency: Infinity//併發級別(啟動的瀏覽器數)
  })
}

詳細瞭解可以去karma :http://karma-runner.github.io/latest/index.html  

 


 


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

-Advertisement-
Play Games
更多相關文章
  • 首先明白一點,JavaScript中的this指向只與函數的調用方式有關。判斷this指向誰,可以用下麵四條規則,並且四條規則的優先順序順序是從上到下的: 1. 如果函數是通過new操作符調用的,那麼this指向通過new創建的新對象; 2. 如果函數是通過call或apply方法調用的,那麼this ...
  • node.js的初級使用 作為一個全棧開發員怎麼能不會node.js了?至少得會用node搭載環境吧!話不多說直接開乾! 一、下載與安裝: 官網:http://nodejs.cn/ 中文文檔:http://nodejs.cn/api/ 下載好對應版本後直接雙擊安裝即可。 安裝完成後再命令行輸入:no ...
  • 效果截圖: ...
  • 1.最傳統方法 for迴圈 for… in for…of 雖然for… in 、 for… of 都能夠變曆數組,但是兩者還是有很大區別的,先說結論: 兩者的主要區別在於他們的迭代方式 推薦在迴圈對象屬性的時候,使用for in,在遍曆數組的時候推薦使用for of for…in 迴圈出來的是key ...
  • H5的新特性 1.語義化標簽 2.表單新特性 3.多媒體視頻(video)和音頻(audio) 4.web存儲 C3的新特性 1.選擇器:屬性選擇器E[attr],偽類選擇器E:nth-child(n),空偽類E:empty ,排除偽類E:not(selector) 2.顏色:新增了RGBA、HSL ...
  • 基礎知識點 1.水平垂直居中 子絕父相,子盒子設置絕對定位,設置top:50%;left:50%,margin-top:-50%;margin-left:-50%; 子絕父相,子盒子設置絕對定位,設置 left & top & right & bottom為0;margin: auto; 伸縮盒子, ...
  • 碼雲地址https://gitee.com/zenonia/gerenjianjie 截圖 代碼如下: ...
  • javaScript基礎 js中的註釋 單行註釋(格式://註釋內容) 多行註釋(格式:/* 註釋內容 */) 文本註釋(格式:/** 註釋內容 */)js語句 例如: var num = 8; 我能用var定義了一個保存數字8的變數num 語句塊:{聲明內容的區域} 註意:JS語句塊是由 { } ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...