搜尋
Mocha與chai的使用Mar 19, 2018 pm 04:30 PM
mocha使用

這次帶給大家Mocha與chai的使用,Mocha與chai使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

Mocha 的簡介

Mocha是流行的JavaScript測試框架之一,透過它來新增和執行測試,從而保證程式碼品質

Mocha 的安裝與設定

全域安裝Mocha

npm install -g mocha

專案中也安裝Mocha

npm install --save-dev mocha

在package.json中加入下面腳本:

"scripts": {
    "test": "mocha"
}

Mocha 的使用

在使用前,我們先來看看我們用來使用的測試項目的結構:
Mocha與chai的使用

如上圖所示,測試檔案需要放在test目錄下,mocka運行時會執行test目錄下的所有js檔案(僅限於test以下這一層級,對test/subtest這一層級並不執行)。

其中index.js為我們的被測試程式碼:

/**
 * 加法函数
 * @param {第一个数} a 
 * @param {第二个数} b 
 */
function addNum(a,b){
    return a+b;
}
module.exports=addNum;

而index.test.js為我們的測試程式碼(注意這裡的命名加了一個test,並不是必須的,只是為了好區分哪些是測試檔):

var addNum=require('../src/index')

describe('测试index.js', function() {
  describe('测试addNum函数', function() {
    it('两数相加结果为两个数字的和', function() {
       if(addNum(1,2)!==3){
         throw new Error("两数相加结果不为两个数字的和");
       }
    });
  });
});

解析一下以上程式碼的語法:

測試腳本裡面應該包含一個或多個describe區塊,每個describe區塊應該包括一個或多個it塊。
describe區塊稱為"測試套件"(test suite),表示一組相關的測試。它是一個函數,第一個參數是測試套件的名稱("測試index.js"),第二個參數是一個實際執行的函數。
it塊稱為"測試案例"(test case),表示一個單獨的測試,是測試的最小單位。它也是一個函數,第一個參數是測試案例的名稱("兩數相加結果為兩個數字的和"),第二個參數是一個實際執行的函數。

在上面的範例中,測試addNum函數,如果執行錯誤拋出異常

此時執行

npm test

就可得到以下結果
Mocha與chai的使用

為了看一下執行錯誤的結果,此時我們修改index.js的程式碼為:

function addNum(a,b){
    return a+b-1;
}
module.exports=addNum;

再執行

npm test

結果如下:
Mocha與chai的使用

Mocha與斷言庫chai

在上面的Mocha例子中,測試失敗用拋例外來處理,多少有點繁瑣,所以就有了斷言庫的出現。
這裡我們介紹一個常用的斷言庫chai。
可以簡單理解為這就是對我們上面拋異常方法的一個封裝,當判斷失敗時會拋出一個異常。
先安裝chai:

npm install --save-dev chai

接著讓我們用chai修改一下上面的index.test.js:

var expect = require('chai').expect;
var addNum=require('../src/index')

describe('测试index.js', function() {
  describe('测试addNum函数', function() {
    it('两数相加结果为两个数字的和', function() {
      expect(addNum(1,2)).to.be.equal(3);
    });
  });
});

上面的語法很接近自然語言,expect(期待)一個表達式的結果equal(等於)一個表達式。
運行

npm test

得到以下結果:
Mocha與chai的使用

可以看出圖中的斷言函式庫也印出了期望的結果3和實際的結果2。
如果用判斷來拋異常的話會繁瑣許多。

以上語法為chai的expect語法,它還有should語法和asset語法。
如果是以前用過java和.NET的話,對asset可能更適應一點:

var assert = require('chai').assert;

assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(foo, 3)
assert.property(tea, 'flavors');
assert.lengthOf(tea.flavors, 3);

這其中的語法意思很明顯,這裡就不再贅述了。

Mocha的更多使用

如果想測試單一的測試js,可以用:

mocha test/index.test.js

或多個js

mocha test/index.test.js test/add.test.js

當然也可以用通配符測試某個資料夾下所有的js和jsx:

mocha 'test/some/*.@(js|jsx)'

Mocha與ES6

在上面我們用的並非是ES6的語法,那麼讓我們把其中的程式碼都改為ES6的語法。
其中index.js為:

/**
 * 加法函数
 * @param {第一个数} a 
 * @param {第二个数} b 
 */
export default (a,b)=>{
    return a+b-1;
}

而index.test.js為:

import {assert} from 'chai'
import addNum from '../src/index'

describe('测试index.js',()=> {
  describe('测试addNum函数', ()=> {
    it('两数相加结果为两个数字的和', ()=> {
      assert.equal(addNum(1,2),3)
    })
  })
})

此時直接運行mock肯定是不行的,我們現在需要安裝一下babel:

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

然後,在專案目錄下面,新建一個.babelrc檔:

{
  "presets": [ "es2015" ]
}

接著講package.json中的腳本改為:

"scripts": {
  "test": "mocha --compilers js:babel-core/register"
},

其中--compilers參數用來指定測試腳本的轉碼器,這行指令的意思是執行mocha時先用babel-core/register模組,處理一下.js檔案

注意:
--compilers將會在未來被移除,官方稱它是redundant(累贅的),而作為替代方案的是

"scripts": {
  "test": "mocha --require babel-core/register"
},

指令變得更加簡單了

Mocha测试用例执行的超时和高亮

Mocha默认每个测试用例最多执行2000毫秒,如果到时没有得到结果,就报错。以下命令设置超时时间为5000:

mocha -t 5000 index.test.js

Mocha默认会高亮显示超过75毫秒的测试用例,以下命令设置高亮判断的临界值:

mocha -s 1000 index.test.js

Mocha测试的钩子

Mocha在describe块之中,提供测试用例的四个钩子:before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

describe('测试index.js',()=> {
  before(()=>console.info("在本区块的所有测试用例之前执行"))

  after(()=>console.info("在本区块的所有测试用例之后执行"))

  beforeEach(()=>console.info("在本区块的每个测试用例之前执行"))

  afterEach(()=>console.info("在本区块的每个测试用例之后执行"))

  describe('测试addNum函数', ()=> {
    it('两数相加结果为两个数字的和', ()=> {
      assert.equal(addNum(1,2),3)
    })
  })
})

小结

关于mock和chai常用的一些玩法都讲了,更多的关于mock的测试结果输出格式,以及skip跳过测试和only仅测试当前用例等玩法就不讲述了。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue指令的使用

JS闭包的使用

以上是Mocha與chai的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何在Go中使用命名管道?如何在Go中使用命名管道?May 11, 2023 pm 04:22 PM

命名管道是一种在操作系统中相对比较低级的进程通信方式,它是一种以文件为中介的进程通信方式。在Go语言中,通过os包提供了对命名管道的支持。在本文中,我们将介绍如何在Go中使用命名管道来实现进程间通信。一、命名管道的概念命名管道是一种特殊的文件,可以被多个进程同时访问。在Linux系统中,命名管道是一种特殊的文件类型,它们存在于文件系统的某个位置上,并且可以在

如何在Go中使用第三方库?如何在Go中使用第三方库?May 11, 2023 pm 03:30 PM

在Go语言中,使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序,同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库,确保其稳定性和可靠性,是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库,并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式:1.使用goget命令首先

如何在PHP中使用协程?如何在PHP中使用协程?May 12, 2023 am 08:10 AM

随着传统的多线程模型在高并发场景下的性能瓶颈,协程成为了PHP编程领域的热门话题。协程是一种轻量级的线程,能够在单线程中实现多任务的并发执行。在PHP的语言生态中,协程得到了广泛的应用,比如Swoole、Workerman等框架就提供了对协程的支持。那么,如何在PHP中使用协程呢?本文将介绍一些基本的使用方法以及常见的注意事项,帮助读者了解协程的运作原理,以

如何在PHP中使用变量函数如何在PHP中使用变量函数May 18, 2023 pm 03:52 PM

变量函数是指可以使用变量来调用函数的一种特殊语法。在PHP中,变量函数是非常有用的,因为它可以让我们更加灵活地使用函数。在本文中,我们将介绍如何在PHP中使用变量函数。定义变量函数在PHP中,变量函数的定义方式非常简单,只需要将要调用的函数名赋值给一个变量即可。例如,下面的代码定义了一个变量函数:$func='var_dump';这里将var_dump函

如何在Go中使用音频处理?如何在Go中使用音频处理?May 11, 2023 pm 04:37 PM

随着音频处理在各种应用场景中的普及,越来越多的程序员开始使用Go编写音频处理程序。Go语言作为一种现代化的编程语言,具有优秀的并发性和高效率的特点,使用它进行音频处理十分方便。本文将介绍如何在Go中使用音频处理技术,包括读取、写入、处理和分析音频数据等方面的内容。一、读取音频数据在Go中读取音频数据有多种方式。其中比较常用的是使用第三方库进行读取,比如go-

如何在 Windows 11 中按需使用 OneDrive 的文件如何在 Windows 11 中按需使用 OneDrive 的文件Apr 14, 2023 pm 12:34 PM

<p>Windows 系统上的 OneDrive 应用程序允许您将文件存储在高达 5 GB 的云上。OneDrive 应用程序中还有另一个功能,它允许用户选择一个选项,是将文件保留在系统空间上还是在线提供,而不占用您的系统存储空间。此功能称为按需文件。在这篇文章中,我们进一步探索了此功能,并解释了有关如何在 Windows 11 电脑上的 OneDrive 中按需使用文件的各种选项。</p><h2>如何使用 On

如何在Go中使用WebSocket?如何在Go中使用WebSocket?May 11, 2023 pm 04:17 PM

近年来,WebSocket技术已经成为了Web开发中不可或缺的一部分。WebSocket是一种在单个TCP连接上进行全双工通信的协议,它使得客户端和服务器之间的通信更加流畅和高效。如今,很多现代的Web应用程序都使用了WebSocket技术,例如实时聊天、在线游戏以及实时数据可视化等。Go语言作为一个现代的编程语言,自然也提供了很好的支持WebSock

如何在PHP中使用数据聚合函数如何在PHP中使用数据聚合函数May 18, 2023 pm 02:51 PM

数据聚合函数是一种用于处理数据库表中多行数据的函数。在PHP中使用数据聚合函数可以使得我们方便地进行数据分析和处理,例如求和、平均数、最大值、最小值等。下面将介绍如何在PHP中使用数据聚合函数。一、介绍常用的数据聚合函数COUNT():计算某一列的行数。SUM():计算某一列的总和。AVG():计算某一列的平均值。MAX():取出某一列的最大值。MIN():

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器