Mar*_*ins 30 javascript mocha.js reactjs
它只是我,还是他们的文档没有解释如何在浏览器中运行测试？
我是否必须创建他们在示例中显示的HTML文件？如何让它为我的项目运行我的特定测试用例集呢？
我想要mocha从项目根目录运行相同的输出.test需要包含文件夹内的所有子目录
Sam*_*mir 28
如果我们需要在浏览器中运行测试,我们需要设置一个简单的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下.
重要的事情 :
我认为文档也不完全清楚,但我最终想出来并设置好了.这是如何做:
在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上查看代码
https://captainstack.github.io/public-stackhouse/
我的做法是：
使用 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 中找到。
如果这是可以改进的，请告诉我。答案受到这篇文章的启发。
这是浏览器中最基本的 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>| 归档时间： |
|
| 查看次数： |
13566 次 |
| 最近记录： |