Mocha 在浏览器中加载空白

Question

上下文

我以前用过很多次 Mocha，包括在浏览器中和仅使用命令行。我倾向于使用 Chai 的 expect 模块来进行 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>

之前的尝试

我试过移动脚本标签，认为依赖项在加载时未得到满足。
我试过相对路径和绝对路径。控制台显示所有标签都正确加载。
我试过修改运行脚本标签。如上例时，结果是空白页，写着"Cannot read property 'appendChild' of null"，指回Mocha：

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

Answer 1

给你，刚测试过。

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

Answer 2

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

在文件中全局设置 location 变量会导致奇怪的重定向（到 /2,1）和错误 "Cannot read property 'appendChild' of null".

在第 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>

Mocha 在浏览器中加载空白

Mocha Loading Blank in Browser

javascript

html

bdd

mocha.js

chai

上下文

问题

当前 specRunner.html

之前的尝试