天天看點

測試架構 Mocha 執行個體教程

所謂"測試架構",就是運作測試的工具。通過它,可以為javascript應用添加測試,進而保證代碼的品質。

測試架構 Mocha 執行個體教程

上面代碼會在目錄内部安裝<code>mocha</code>,為了操作的友善,請在全面環境也安裝一下<code>mocha</code>。

<code>mocha</code>的作用是運作測試腳本,首先必須學會寫測試腳本。所謂"測試腳本",就是用來測試源碼的腳本。

要測試這個加法子產品是否正确,就要寫測試腳本。

上面這段代碼,就是測試腳本,它可以獨立執行。測試腳本裡面應該包括一個或多個<code>describe</code>塊,每個<code>describe</code>塊應該包括一個或多個<code>it</code>塊。

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

<code>it</code>塊稱為"測試用例"(test case),表示一個單獨的測試,是測試的最小機關。它也是一個函數,第一個參數是測試用例的名稱("1 加 1 應該等于 2"),第二個參數是一個實際執行的函數。

上面的測試腳本裡面,有一句斷言。

所謂"斷言",就是判斷源碼的實際執行結果與預期結果是否一緻,如果不一緻就抛出一個錯誤。上面這句斷言的意思是,調用<code>add(1, 1)</code>,結果應該等于2。

所有的測試用例(it塊)都應該含有一句或多句的斷言。它是編寫測試用例的關鍵。斷言功能由斷言庫來實作,mocha本身不帶斷言庫,是以必須先引入斷言庫。

<code>expect</code>斷言的優點是很接近自然語言,下面是一些例子。

基本上,<code>expect</code>斷言的寫法都是一樣的。頭部是<code>expect</code>方法,尾部是斷言方法,比如<code>equal</code>、<code>a</code>/<code>an</code>、<code>ok</code>、<code>match</code>等。兩者之間使用<code>to</code>或<code>to.be</code>連接配接。

如果<code>expect</code>斷言不成立,就會抛出一個錯誤。事實上,隻要不抛出錯誤,測試用例就算通過。

上面的這個測試用例,内部沒有任何代碼,由于沒有抛出了錯誤,是以還是會通過。

上面的運作結果表示,測試腳本通過了測試,一共隻有1個測試用例,耗時是8毫秒。

<code>mocha</code>指令後面緊跟測試腳本的路徑和檔案名,可以指定多個測試腳本。

為了改變這種行為,就必須加上<code>--recursive</code>參數,這時<code>test</code>子目錄下面所有的測試用例----不管在哪一層----都會執行。

指令行指定測試腳本時,可以使用通配符,同時指定多個檔案。

上面的第一行指令,指定執行<code>spec</code>目錄下面的<code>my.js</code>和<code>awesome.js</code>。第二行指令,指定執行<code>test/unit</code>目錄下面的所有js檔案。

除了使用shell通配符,還可以使用node通配符。

上面代碼指定運作<code>test</code>目錄下面任何子目錄中、檔案字尾名為<code>js</code>或<code>jsx</code>的測試腳本。注意,node的通配符要放在單引号之中,否則星号(<code>*</code>)會先被shell解釋。

上面這行node通配符,如果改用shell通配符,要寫成下面這樣。

<code>--help</code>或<code>-h</code>參數,用來檢視mocha的所有指令行參數。

<code>--reporter</code>參數用來指定測試報告的格式,預設是<code>spec</code>格式。

上面是<code>tap</code>格式報告的顯示結果。

<code>--reporters</code>參數可以顯示所有内置的報告格式。

測試架構 Mocha 執行個體教程

上面代碼中,<code>mocha</code>指令使用了項目内安裝的版本,而不是全局安裝的版本,因為<code>mochawesome</code>子產品是安裝在項目内的。

測試架構 Mocha 執行個體教程

<code>--watch</code>參數用來監視指定的測試腳本。隻要測試腳本有變化,就會自動運作mocha。

上面指令執行以後,并不會退出。你可以另外打開一個終端視窗,修改<code>test</code>目錄下面的測試腳本<code>add.test.js</code>,比如删除一個測試用例,一旦儲存,mocha就會再次自動運作。

<code>--grep</code>參數用于搜尋測試用例的名稱(即<code>it</code>塊的第一個參數),然後隻執行比對的測試用例。

上面代碼隻測試名稱中包含"1 加 1"的測試用例。

<code>--invert</code>參數表示隻運作不符合條件的測試腳本,必須與<code>--grep</code>參數配合使用。

上面這個指令有三個參數<code>--recursive</code>、<code>--reporter tap</code>、<code>--growl</code>。

然後,執行<code>mocha</code>就能取得與第一行指令一樣的效果。

如果測試用例不是存放在test子目錄,可以在<code>mocha.opts</code>寫入以下内容。

上面代碼指定運作<code>server-tests</code>目錄及其子目錄之中的測試腳本。

es6轉碼,需要安裝babel。

最後,使用<code>--compilers</code>參數指定測試腳本的轉碼器。

上面代碼中,<code>--compilers</code>參數後面緊跟一個用冒号分隔的字元串,冒号左邊是檔案的字尾名,右邊是用來處理這一類檔案的子產品名。上面代碼表示,運作測試之前,先用<code>babel-core/register</code>子產品,處理一下<code>.js</code>檔案。由于這裡的轉碼器安裝在項目内,是以要使用項目内安裝的mocha;如果轉碼器安裝在全局,就可以使用全局的mocha。

下面是另外一個例子,使用mocha測試coffeescript腳本。測試之前,先将<code>.coffee</code>檔案轉成<code>.js</code>檔案。

注意,babel預設不會對iterator、generator、promise、map、set等全局對象,以及一些全局對象的方法(比如<code>object.assign</code>)轉碼。如果你想要對這些對象轉碼,就要安裝<code>babel-polyfill</code>。

然後,在你的腳本頭部加上一行。

mocha預設每個測試用例最多執行2000毫秒,如果到時沒有得到結果,就報錯。對于涉及異步操作的測試用例,這個時間往往是不夠的,需要用<code>-t</code>或<code>--timeout</code>參數指定逾時門檻。

上面的測試用例,需要4000毫秒之後,才有運作結果。是以,需要用<code>-t</code>或<code>--timeout</code>參數,改變預設的逾時設定。

上面指令将測試的逾時時限指定為5000毫秒。

另外,上面的測試用例裡面,有一個<code>done</code>函數。<code>it</code>塊執行的時候,傳入一個<code>done</code>參數,當測試結束的時候,必須顯式調用這個函數,告訴mocha測試結束了。否則,mocha就無法知道,測試是否結束,會一直等到逾時報錯。你可以把這行删除試試看。

mocha預設會高亮顯示超過75毫秒的測試用例,可以用<code>-s</code>或<code>--slow</code>調整這個參數。

上面指令指定高亮顯示耗時超過1000毫秒的測試用例。

運作下面指令,可以看到這個測試會通過。

mocha在<code>describe</code>塊之中,提供測試用例的四個鈎子:<code>before()</code>、<code>after()</code>、<code>beforeeach()</code>和<code>aftereach()</code>。它們會在指定時間執行。

上面代碼中,<code>beforeeach</code>會在<code>it</code>之前執行,是以會修改全局變量。

大型項目有很多測試用例。有時,我們希望隻運作其中的幾個,這時可以用<code>only</code>方法。<code>describe</code>塊和<code>it</code>塊都允許調用<code>only</code>方法,表示隻運作某個測試套件或測試用例。

上面代碼中,隻有帶有<code>only</code>方法的測試用例會運作。

此外,還有<code>skip</code>方法,表示跳過指定的測試套件或測試用例。

上面代碼的這個測試用例不會執行。

除了在指令行運作,mocha還可以在浏覽器運作。

測試架構 Mocha 執行個體教程

首先,使用<code>mocha init</code>指令在指定目錄生成初始化檔案。

然後,把這個檔案,以及斷言庫<code>chai.js</code>,加入<code>index.html</code>。

現在,在浏覽器裡面打開<code>index.html</code>,就可以看到測試腳本的運作結果。

mocha支援從測試用例生成規格檔案。

測試架構 Mocha 執行個體教程

(完)

繼續閱讀