Question

我正在尝试用Mocha和Chai进行单元测试。测试在终端中成功运行，但是当我在浏览器中检查testrunner.html文件时它是空白的，只显示“pass：0failures：0duration：0s”

但在终端显示：

$ mocha

  Array
    ✓ should start empty

  1 passing (18ms)

Answer 1

<强> HTML

按HTML的顺序

链接到mocha css样式表。

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

使用div撰写id='mocha'代码。测试将插入此div，这将允许您在浏览器中查看它们。
```
<div id="mocha"></div>
```

编写脚本标记以加载mocha。

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

编写脚本标记以加载任何其他依赖项，例如chai。

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

设置mocha BDD api（或TDD，具体取决于您编写测试的方式）。
```
 <script>mocha.setup("bdd");</script>
```

编写测试（内联或链接到外部JavaScript文件）。

BDD示例：

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

运行摩卡。
```
mocha.run();
```

代码段示例

尝试运行此代码段

＆＃13;

<!-- 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>

＆＃13;

<强>演示

这是CodePen Demo，它不使用如此多的内联JavaScript。

<强>文档

可以在官方文档中找到有用的信息here。

浏览器中的摩卡测试结果显示空白

1 个答案: