瀏覽器中的摩卡測試結果顯示空白

Question

我正在嘗試使用Mocha和Chai進行單元測試。該測試在終端成功運行，但是當我檢查testrunner.html文件瀏覽器，它是空白的，只是顯示「通行證：0failures：0duration：0」

但在終端這表明：

$ mocha 

    Array 
    ✓ should start empty 

    1 passing (18ms) 

Answer 1

HTML

在此爲了在你的HTML

1. 鏈接到一個摩卡css樣式表。

   <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" /> 
   

   ---

2. 寫div標籤與id='mocha'。測試將插入此div，這將允許您在瀏覽器中看到它們。

   <div id="mocha"></div> 
   

   ---

3. 寫一個腳本標記加載摩卡。

   <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script> 
   

   ---

4. 寫一個腳本標記加載任何其他依賴像chai。

   <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.js"></script> 
   

   ---

5. 設置摩卡BDD API（或TDD取決於你如何寫你的測試）。

   <script>mocha.setup("bdd");</script> 
   

   ---

6. 編寫測試（內嵌或鏈接到外部JavaScript文件）。

   BDD例如：

   describe("addition", function() { 
       it("adds 1 and 1", function() { 
       expect(1 + 1).to.equal(2); 
       }); 
   }); 
   

   ---

7. 運行摩卡。

   mocha.run(); 
   

---

摘錄例

嘗試運行這個片段

<!-- link to mocha css stylesheet --> 
 
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" /> 
 

 
<!-- write a div with id "mocha" for the output to be inserted into --> 
 
<div id="mocha"></div> 
 

 
<!-- load mocha framework --> 
 
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script> 
 

 
<!-- load any other libraries like the chai assertion library --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.js"></script> 
 

 

 
<!-- setup mocha to use the BDD interface --> 
 
<!-- Note: you can use TDD here instead --> 
 
<!-- depending on how you are writing your tests --> 
 
<!-- more information: http://mochajs.org/#tdd --> 
 
<script> 
 
    mocha.setup("bdd"); 
 
</script> 
 

 
<!-- write tests --> 
 
<script> 
 
    // access 'expect' from chai 
 
    var expect = chai.expect; 
 

 
    // write tests (BDD example) 
 
    describe("addition", function() { 
 
    it("adds 1 and 1", function() { 
 
     expect(1 + 1).to.equal(2); 
 
    }); 
 
    it("adds 1000 and 10", function() { 
 
     expect(1000 + 10).to.equal(1010); 
 
    });  
 
    }); 
 
    describe("subtraction", function() { 
 
    it("subtracts 1 from 1", function() { 
 
     expect(1 - 1).to.equal(0); 
 
    }); 
 
    it("subtracts 10 from 1000", function() { 
 
     expect(1000 - 10).to.equal(990); 
 
    });  
 
    }); 
 
    describe("multiplication", function() { 
 
    it("multiplies 1 by 1", function() { 
 
     expect(1 * 1).to.equal(1); 
 
    }); 
 
    it("multiplies 1000 by 10", function() { 
 
     expect(1000 * 10).to.equal(10000); 
 
    });  
 
    }); 
 
    describe("division", function() { 
 
    it("divides 1 by 1", function() { 
 
     expect(1/1).to.equal(1); 
 
    }); 
 
    it("divides 1000 by 10", function() { 
 
     expect(1000/10).to.equal(100); 
 
    });  
 
    });  
 
</script> 
 

 
<!-- run mocha --> 
 
<script> 
 
    mocha.run(); 
 
</script>

---

演示

• 這裏是一個CodePen Demo不使用這麼多聯JavaScript。

---

文檔

• 有用的信息，可以發現here在官方文檔。