如何用Mocha測試JavaScript-基礎知識

Mocha是最受歡迎的Node.js測試框架之一,它看起來很令人生畏,實際上卻很容易入門。

如何用Mocha測試JavaScript-基礎知識

這個教程要講什麼?

本教程是關於Mocha基礎知識。更多幹貨內容請鎖定"朗妹兒"微信公眾號,每天都有更新。在本教程結束之前,我們將成功地使用Mocha編寫第一個測試。我們會了解如何設置Mocha,如何分組測試以及如何使用斷言庫。明天我將發佈第2部分,其重點是更高級的測試技術,以及將測試與實際的代碼整合在一起!

Mocha的文檔還不錯。不過,對於JavaScript新手來說,這文檔有點厚,不太好理解。我會帶大家玩一遍來自於Mocha文檔中的第一個例子。對於有些概念,我會比文檔做更多的分析和分解,以確保大家準確理解發生了什麼。

準備好了麼?我們開始吧!

全局安裝Mocha

通過執行如下命令,全局安裝Mocha:

1. $ npm install -g mocha

當全局安裝npm模塊時,不僅僅是將其用於當前項目,而是能像命令行工具一下訪問和使用該模塊。一旦Mocha被全局安裝了,我們就能夠在命令行上使用mocha關鍵字執行命令。

創建一個項目

接下來,我們將創建一個名為test的項目目錄。在test文件夾中,我們將創建一個名為test.js的文件。最後,我們通過執行npm init初始化我們的項目。

如果你不熟悉的話,npm init是一個以交互方式創建package.json文件的簡單方法。只需回答問題,然後敲回車鍵即可。這裡最重要的問題是 'test command:' - 回答'mocha'即可。這樣我們只需鍵入npm test就可以運行mocha。

完成後,應該有一個看起來像如下這樣的文件結構:

1. test
2. |-- test.js
3. |-- package.json

這裡package.json文件也應該包含如下的json:

1. "scripts": {
2. "test": "mocha"
3. },

有了上面這些東西后,我們就做好了測試的準備了!

編寫第一個測試

我們打算直接從Mocha文檔中複製一個測試,然後我會帶大家看看到底發生了什麼。將如下代碼複製到test.js文件中:

1. var assert = require('assert');
2. describe('Array', function() {
3. describe('#indexOf()', function() {
4. it('當值不存在時,應該返回 -1 ', function(){
5. assert.equal(-1, [1,2,3].indexOf(4));
6. });
7. });
8. });

現在在命令行中用npm test運行測試,應該得到如下輸出結果:

1. Array
2. #indexOf()
3. ✓ 當值不存在時,應該返回 -1
4.
5. 1 passing (9ms)

我們的測試通過!太棒了。不過我們不知道為什麼...且聽下面分解。

記住,Mocha是一個測試框架。就是說它用於組合和執行測試。在編寫測試時,應該注意兩個基本的函數調用:**describe()**和**it()**。兩個都在上面的示例中用到了。

· describe()只不過是Mocha中將測試分組的一種方法。我們可以按必要的深度來將測試分組嵌套。describe()帶有兩個參數,第一個是測試組的名稱,第二個是回調函數。

1. describe('string name', function(){
2. // 這裡可以嵌套更多的 describe(),或者寫測試
3. });

回想一下早前的例子。我們有一個名為Array的測試組,裡面有一個名為#indexOf()的測試組,最後最裡面我們的實際測試。

· it()用於單個測試用例。it()應該被寫成好像你大聲說出來:"它應該等於零"、"它應該記錄用戶",等等。it()有兩個參數,一個參數是一個字符串,說明測試應該做什麼,第二個參數是一個包含實際測試的回調函數:

1. it('should blah blah blah', function(){
2. //測試用例放在這裡
3. });

我們可以在測試框架(Mocha)中使用斷言庫。斷言庫是驗證事物正確的工具 - 是它來實際驗證測試結果。

請注意,並非一定要用斷言庫,不過用斷言庫會使測試更容易點。Mocha允許我們使用想用的任何斷言庫。在上面的例子中(以及所有其他示例),我們用的是Node.js內置的assert模塊。因此,我們用這行代碼導入assert模塊:

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

assert中包含很多不同的斷言測試。我們已經使用的一個是assert.equal(actual, expected);,它用雙等號(==)測試實際參數和期待的參數之間的相等性。

最後一次回憶一下我們的原例:

1. it('當值不存在時,應該返回 -1', function(){
2. assert.equal(-1, [1,2,3].indexOf(4));
3. });

這裡我們所做的就是測試[1,2,3].indexof(4)是否等於-1。如果預期參數等於實際參數,則測試通過。否則,測試失敗。

再到命令行,用npm test運行我們的測試:

1. Array
2. _#indexOf()_
3. ✓ 當值不存在時,應該返回 -1
4.
5. 1 passing (9ms)

結果一行一行分解就是:

1. 第一個測試組Array

2. 嵌套的測試組indexOf()

3. 表示通過測試的檢測標記

4. 一個摘要,表明我們有1次通過測試,測試花了9毫秒

放在一起

現在我們已經有了所有的東西,所以可以把它放在一起了。這是我們的原始測試,用註釋解釋了每一行:

1. // Require 內置的 'assertion' 庫
2. var assert = require('assert');
3. // 創建一組關於數組的測試
4. describe('Array', function() {
5. // 在 Array 組內,為 indexOf 創建一組測試
6. describe('#indexOf()', function() {
7. // 一個字符串解釋我們在測試什麼
8. it('當值不存在時,應該返回 -1', function(){
9. // 實際測試: -1 應該等於 indexOf(...)
10. assert.equal(-1, [1,2,3].indexOf(4));
11. });
12. });
13. });

檢驗學習情況

好了,該檢驗一下學習情況了。不要滾動查看答案,請編寫如下測試:

1. 創建一個名為Math的測試組

2. 在Math組內創建兩個測試

3. 第一個測試:應該是否3*3=9

4. 第二個測試:應該測試是否(3-4)*8=-8

測試答案

大家能做到嗎?如果沒有,沒關係!如果做到了,乾的不錯!下面我們看看註釋好的解決方案:

1. // require 內置的 'assertion' 庫
2. var assert = require('assert');
3. // 創建一個名為Math的測試套件(組)
4. describe('Math', function() {
5. // 第一個測試:一個字符串解釋我們在測試什麼
6. it('should test if 3*3 = 9', function(){
7. // 實際測試: 3*3 應該等於 9
8. assert.equal(9, 3*3);
9. });
10. // 第二個測試: 一個字符串解釋我們在測試什麼
11. it('should test if (3-4)*8 = -8', function(){
12. // 實際測試: (3-4)*8 應該等於 -8

13. assert.equal(-8, (3-4)*8);
14. });
15. });
並且當執行npm test時:
1. Math
2. √ should test if 3*3 = 9
3. √ should test if (3-4)*8 = -8
4.
5. 2 passing (13ms)
你做到了。
乾的不錯!現在(理想情況下)我們可以理解Mocha是什麼,如何設置它,如何分組測試以及如何使用斷言庫。不過,如果無法實際測試代碼,那麼測試有什麼好處呢?在明天的文章中,我們將測試集成到現有的JavaScript文件中!


分享到:


相關文章: