Mocha瀏覽器測試入門教程

Aldous 發布于2019-08-22 17:29 / 2474人閱讀

摘要：在中，需要添加源代碼以及斷言庫運行測試使用瀏覽器打開，就會運行測試，并且看到運行結果可知，測試通過使用命令行測試對于習慣在終端敲命令行的程序員來說，用瀏覽器打開去進行測試顯得非常不合時宜。

摘要： 如何使用Mocha在瀏覽器中測試JavaScript代碼？

本文所有代碼都在Fundebug/mocha-browser-test倉庫中。

在玩轉Node.js單元測試博客中，我介紹了測試框架Mocha，對后端Node.js代碼進行測試。在這篇博客，我將介紹如何使用Mocha在瀏覽器中測試JavaScript代碼。

mocha init：初始化測試代碼

安裝mocha(在國內使用cnpm比npm更快):

sudo cnpm install -g mocha

執行mocha init命令，可以自動生成瀏覽器端的測試文件：

mocha init test

mocha會自動創建一個test目錄，其中有4個文件，分別是：

mocha.js：Mocha源碼

mocha.css：Mocha源碼

tests.js：測試代碼

index.html：瀏覽器測試入口頁面

mocha.js與mocha.css是Mocha模塊自身的源代碼，因為需要在瀏覽器中展示測試結果，因此需要Mocha的CSS文件；tests.js為測試代碼，為空文件，需要我們編寫；index.html為運行測試的入門頁面，使用瀏覽器大概它就會運行測試，并且展示測試結果。

index.html是理解Mocha瀏覽器測試的關鍵：



  
    Mocha

可知：

index.html中導入了mocha.js, mocha.css和tests.js文件；

id為mocha的div是空的，測試結果的元素會插入到這個div；

mocha.setup("bdd")指定使用Mocha的BDD接口，mocha.run()表示運行測試，測試代碼tests.js必須放在兩者之間，否則不會運行測試；

運行測試案例 add.js

使用mocha init生成的測試代碼中沒有實際的測試案例，不妨添加一個簡單的add.js：

function add(a, b)
{
    return a + b;
}

可知，add是一個非常簡單的加法函數。

tests.js

在tests.js添加針對add函數的測試代碼：

var should = chai.should();

describe("測試add函數", function()
{
    it("1加1等于2", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });

    it("1加2等于3", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });
});

在測試代碼中，我使用了斷言庫Chai。

index.html

在index.html中，需要添加源代碼add.js以及斷言庫chai.js：



  
    Mocha

運行測試

使用瀏覽器打開index.html，就會運行測試，并且看到運行結果：

可知，測試通過:)

mocha-phantomjs：使用命令行測試

對于習慣在終端敲命令行的程序員來說，用瀏覽器打開index.html去進行測試顯得非常不合時宜。

還好，有所謂的headless的瀏覽器PhantomJS，它沒有圖形界面，卻可以運行前端代碼，方便用來測試。

mocha-phantomjs命令

安裝phantomjs和mocha-phantomjs(phantomjs模塊更名為phantomjs-prebuilt)：

sudo cnpm install -g phantomjs-prebuilt mocha-phantomjs

將Mocha和PhontomJS結合起來的是mocha-phantomjs，在終端執行mocha-phantomjs命令，它會在PhantomJS中執行Mocha測試代碼，并將結果展示在終端，非常方便：

mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html


  測試add函數
    ? 1加1等于2
    ? 1加2等于3


  2 passing (7ms)

--path選項指定了phantomjs的安裝路徑。這個必須指定，否則會報錯"phantomjs terminated with signal SIGSEGV"。

另外，測試代碼tests.js中必須有describe語句，否則使用mocha-phantomjs執行時會報錯"mocha.run() was called with no tests"。

npm test命令

mocha-phantomjs的測試命令比較長，可以在package.json中配置npm的test腳本：

 "scripts": {
    "test": "mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html"
  },

這樣，執行npm test命令就可以運行測試。

云服務器 GPU云服務器單元測試-mocha-jasmine mocha 瀏覽器webrtc測試 webrtc 瀏覽器測試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95218.html

Mocha 和 Chai 入門初探

摘要：轉載自樓主個人博客和入門初探在和作比較的時候兩者主要的不同就是的集成度比較高內置斷言庫而需要搭配額外的斷言庫在此選擇了比較流行的作為斷言庫風格的選擇其中又有好幾種斷言風格我們經常見到的其實就是風格的其中我較喜歡因為它可以直接以屬性的方式嵌入轉載自樓主個人博客 Mocha 和 Chai 入門初探 Chai 在和 jest 作比較的時候, 兩者主要的不同就是 jest 的集成度比較高內置...

caoym 2019-08-21 11:26 評論0 收藏0
前端單元測試實現教程 mocha + mochawesome + istanbul + sinon

摘要：為什么要寫單元測試減少提高代碼質量，保證你的代碼是可測試的放心重構當你每個方法都寫了單元測試的時候，你每一個改動都會影響相應的單元測試，這樣你不用費盡心思的考慮哪里會有影響，特別是復雜項目或非核心功能不易被測試到，從而導致的產生。為什么要寫單元測試減少bug 提高代碼質量，保證你的代碼是可測試的放心重構當你每個方法都寫了單元測試的時候，你每一個改動都會影響相應的單元測試，這...

AaronYuan 2019-08-22 15:36 評論0 收藏0
Vue單元測試實戰教程(Mocha/Karma + Vue-Test-Utils + Chai)

摘要：在前端進階之路前端架構設計測試核心這邊文章中通過分析了傳統手工測試的局限性去引出了測試驅動開發的理念并介紹了一些測試工具這篇文章我將通過一個的項目去講解如何使用且結合官方推薦的去進行單元測試的實戰一安裝我為本教程寫一個示例庫您可以直接在《前端進階之路: 前端架構設計(3) - 測試核心》這邊文章中, 通過分析了傳統手工測試的局限性去引出了測試驅動開發的理念, 并介紹了一些測試工具....

RebeccaZhong 2019-08-21 18:31 評論0 收藏0
使用karma+mocha+chai+sinon+@vue/test-utils為你的組件庫增加單元

摘要：但是，項目中的一些公共封裝，比如公共的組件公用的功能模塊等是可以使用單元測試的。因此特為組件庫引入單元測試，目的在于能減少組件的，避免重復的發布不必要的包。項目github地址：https://github.com/yuanalina/installAsRequired這里必須要提前說明，前端項目的單元測試不是必須的，特別是業務型項目，增加單元測試反而會成為累贅，增加開發成本且無意義...

happen 2019-08-23 14:53 評論0 收藏0
Ajax單元測試傻瓜教程

摘要：原文出處單元測試傻瓜教程請求經常容易發生錯誤，客戶端發送的數據出問題，服務器端返回的數據有誤都會導致請求錯誤。設置在我們開始單元測試之前，我們需要安裝幾個必須的工具。我們將用它來向你們展示如何對進行單元測試。原文出處：AJAX單元測試傻瓜教程 Ajax 請求經常容易發生錯誤，客戶端發送的數據出問題，服務器端返回的數據有誤都會導致 Ajax 請求錯誤。你不能保證與服務器的連接總是工作...

30e8336b8229 2019-08-21 10:48 評論0 收藏0