Question

上下文

我曾经多次使用过Mocha，无论是在浏览器中还是只是使用命令行。我倾向于将柴的期望模块用于bdd。

我有五个使用命令行npm test的测试文件。我只想在浏览器中运行测试以获得更好的调试。

问题

设置只是令人难以置信。我要么在没有测试的情况下得到一个空白的Mocha页面，要么我在屏幕上看到第一个测试闪光，然后重定向。

当前的specRunner.html

<!DOCTYPE HTML
<html>
<head>
  <title>Mocha Tests</title>
  <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/mocha/mocha.js"></script>
  <script src="node_modules/chai/chai.js"></script>
  <script>mocha.setup('bdd');</script>
  <script src="mineLocation.js"></script>
  <script src="test/mineTests.js"></script>
  <script>
      window.expect = chai.expect;
      mocha.run();
  </script>
</head>
<body>
  <div id="mocha"></div>
</body>
</html>

以前的尝试

我试过移动脚本标签，认为依赖关系在加载时没有得到满足。
我尝试过相对于绝对路径。控制台说所有标签都正确加载。
我尝试修改了运行脚本标记。当它如上例所示时，它结果是一个空白页并说“无法读取属性'appendChild'为null”，指向Mocha：

enter image description here

当运行脚本标记如下所示：
```
$(function() {
    window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
  });
```
它从/specRunner.html重定向到/2,1，并且控制台错误大约每30秒重复一次。

Answer 1

在这里，你去试试吧。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Mocha Test</title>
  <link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
</head>

<body>
  <div id='mocha'></div>
  <div id='app'></div>

  <script src="node_modules/mocha/mocha.js"></script>
  <script src="node_modules/chai/chai.js"></script>
  <script src="app.js"></script>
  <script>
    mocha.setup('bdd');
    var expect = chai.expect;
  </script>
  <!-- Tests -->
  <script src="app_test.js"></script>
  <script>
    mocha.run();
  </script>
</body>

</html>

＆＃13;

Answer 2

因此，我发现它不一定是HTML设置的问题，而是测试的问题。

enter image description here

在文件中全局设置location变量会导致奇怪的重定向（到/2,1）和错误＆＃34;无法读取属性＆quot; appendChild＆＃39; of null＆＃34;。

在第4行的describe语句中移动变量可以解决问题。

我的最终HTML也更清晰：

<html>
<head>
  <meta charset="utf-8">
  <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>mocha.setup('bdd');</script>
  <script src="node_modules/chai/chai.js"></script>
  <script>var expect = chai.expect;</script>

  <!-- src files -->
  <script src="narcissistic.js"></script>
  <script src="morseCodeDecoder.js"></script>
  <script src="windComponents.js"></script>
  <script src="mineLocation.js"></script>

  <!-- test files -->
  <script src="test/narcissisticTests.js"></script>
  <script src="test/morseTests.js"></script>
  <script src="test/windTests.js"></script>
  <script src="test/mineTests.js"></script>

  <script>mocha.run();</script>
</body>
</html>

摩卡在浏览器中加载空白

上下文

问题

当前的specRunner.html

以前的尝试

2 个答案: