如何在瀏覽器中運行 mocha 測試？
[英]How do you run mocha tests in the browser?
問題描述
只是我，還是他們的文檔根本沒有解釋如何在瀏覽器中運行測試？
我是否必須創建他們在示例中顯示的 HTML 文件？ 那么如何讓它為我的項目運行我的特定測試用例集呢？
我想要與從項目根目錄運行mocha相同的 output 。 test文件夾內的所有子目錄都需要包含在內
4 個解決方案
解決方案1
40 2017-03-17 13:06:17
如果我們需要在瀏覽器中運行我們的測試，我們需要設置一個簡單的 HTML 頁面作為我們的測試運行器頁面。 該頁面加載 Mocha、測試庫和我們的實際測試文件。 要運行測試，我們只需在瀏覽器中打開運行器。
示例 html 代碼：
<!DOCTYPE html>
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<!-- load code you want to test here -->
<!-- load your test files here -->
<script>
mocha.run();
</script>
</body>
</html>
設置目錄結構
您應該將測試放在與主代碼文件不同的目錄中。 這使得構建它們變得更容易，例如，如果您想在將來添加其他類型的測試（例如集成測試或功能測試）。
JavaScript 代碼最流行的做法是在項目的根目錄中有一個名為 test/ 的目錄。 然后，每個測試文件都放在 test/someModuleTest.js 下。
重要的事 ：
- 我們加載 Mocha 的 CSS 樣式來為我們的測試結果提供良好的格式。
- 我們創建一個 ID 為 mocha 的 div。 這是插入測試結果的地方。
- 我們加載 Mocha 和 Chai。 它們位於 node_modules 文件夾的子文件夾中，因為我們是通過 npm 安裝的。
- 通過調用 mocha.setup，我們使 Mocha 的測試助手可用。
- 然后，我們加載要測試的代碼和測試文件。 我們這里還沒有任何東西。
- 最后，我們調用 mocha.run 來運行測試。 確保在加載源文件和測試文件后調用它
解決方案2
9 2017-03-17 12:48:26
我認為文檔也不完全清楚，但我最終想通了並進行了設置。 就是這樣：
在 Index.html 中包含 Mocha 腳本和 CSS。 還包括一個 id 為“Mocha”的 div，用於要插入的輸出。 包括您要執行的測試腳本。
<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>
在您的測試文件（本例中為 my_mocha_test.js）中，在頂部包含此設置行：
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
現在測試和 Mocha 內容都已加載，您可以使用以下命令運行測試：
mocha.run();
您可以將它添加到事件偵聽器並在按鈕按下或其他事件上觸發它，或者您可以從控制台運行它，但它應該將測試輸出放在帶有“mocha”ID 的 div 中。 這是一個包含所有這些設置的頁面，您可以在 GitHub 上查看代碼
解決方案3
8 2019-06-06 12:38:43
我的做法是：
ES6，導入，導出，柴
使用 mocha 6.1.4 和 chai 4.2.0。
源代碼/MyClass.js：
export default class MyClass { }
測試/MyClass.js：
import MyClass from "../src/MyClass.js";
let assert = chai.assert;
describe('MyClass tests', function () {
describe('The class', function () {
it('can be instantiated', function () {
assert.isObject(new MyClass());
});
});
});
測試/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<!-- ------------------------------------ -->
<script type="module" src="test.js"></script>
<!-- ------------------------------------ -->
<script type="module">
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
mocha.js 和 mocha.css 文件是通過mocha init test創建的，但也可以在 node_modules/mocha 中找到。
如果這是可以改進的，請告訴我。 答案受到這篇文章的啟發。
解決方案4
6 2020-07-17 18:46:05
這是瀏覽器中最基本的 chai/mocha 測試。
mocha.setup('bdd'); describe('test', () => { it('passes', () => { chai.expect(1).to.eql(1); }); it('fails', () => { chai.expect(1).to.eql(2); }); }); mocha.run();
<div id="mocha" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
使用mocha，如何運行*名稱中沒有*（慢）的所有測試？
[英]With mocha, how do I run all tests that *don't* have (slow) in the name?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.