A browser console error : Invalid character: '@'

Question

我决定使用 JavaScript 学习单元测试。在这种情况下，我一起使用框架 Mocha.js 和 Chai.js。我将它们的最新版本从 cdnjs.com 导入到我的 index.html。所以我在 Safari 控制台中遇到语法错误，如下所示：

无效字符：'@'

据我了解，当前问题出在浏览器或 mocha.min.css 远程文件中。还有其他建议吗？

P.S. 我上传了 index.html, style.css 和 test.js 在下面的例子中：

/*
* Description: This is a short BDD-test which checks pow() for working
* Mission: Just for study and fun!
*/

describe("Is working function pow()?", function() {
 
 it("2 * 2 * 2 = 8", function() {
  assert.equal(pow(2, 3), 8);
 });
 
});

/*
* Description: No any important things..
* Mission: Created for index.html
*/

body {
 background-color: #000;
 color: #FFF;
 font-family: "Open Sans", sans-serif;
}

.title {
 text-align: center;
 font-size: 72px;
 /*margin-top: 300px;*/
}

<!DOCTYPE html>
<html>
 
 <head>

  <meta charset="UTF-8">
  <title>JS TDD</title>
  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- import mocha.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css"></script>
  <!-- customization mocha.js -->
  <script>mocha.setup('bdd');</script>
  <!-- import chai.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
  <!-- customization chai.js (optional) -->
  <script>
   var assert = chai.assert;
  </script>

 </head>

 <body>

  <h1 class="title">Learn unit test!</h1>
  <!-- script for test -->
  <script>

   function pow() {
    return 8; // I am lier!
   }

  </script>

  <!--  upload custom test -->
  <script src="test.js"></script>
  <!-- result of custom test -->
  <div id="mocha"></div>
  <!-- run mocha! -->
        <script>mocha.run();</script>

 </body>
</html>

Answer 1

您正在使用 <script> 元素在

加载 .css 文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css">
</script>

将 <link> 元素的 rel 属性设置为 stylesheet，将 type 设置为 "text/css" 以加载 <script> 元素 .css 文件到 document

<link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css" 
  rel="stylesheet"/>

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>JS TDD</title>

  <!-- import mocha.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.js"></script>
  <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css" rel="stylesheet" />
  <!-- customization mocha.js -->
  <script>
    mocha.setup('bdd');
  </script>
  <!-- import chai.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
  <!-- customization chai.js (optional) -->
  <script>
    var assert = chai.assert;
  </script>
  <style>
    /*
* Description: No any important things..
* Mission: Created for index.html
*/
    body {
      background-color: #000;
      color: #FFF;
      font-family: "Open Sans", sans-serif;
    }
    .title {
      text-align: center;
      font-size: 72px;
      /*margin-top: 300px;*/
    }
  </style>

</head>

<body>

  <h1 class="title">Learn unit test!</h1>
  <!-- script for test -->
  <script>
    function pow() {
      return 8; // I am lier!
    }
  </script>

  <!--  upload custom test -->
  <script>
    /*
     * Description: This is a short BDD-test which checks pow() for working
     * Mission: Just for study and fun!
     */

    describe("Is working function pow()?", function() {

      it("2 * 2 * 2 = 8", function() {
        assert.equal(pow(2, 3), 8);
      });

    });
  </script>
  <!-- result of custom test -->
  <div id="mocha"></div>
  <!-- run mocha! -->
  <script>
    mocha.run();
  </script>

</body>

</html>

plnkrhttp://plnkr.co/edit/45vSloJPChBvgSc96DRB?p=preview

A browser console error : Invalid character: '@'

A browser console error : Invalid character: '@'

javascript

css

browser

unit-testing

syntax-error