I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. However, upon checking the Safari console, I noticed a syntax error as shown below:
Invalid character: '@'
https://i.stack.imgur.com/dSlU3.png
After some investigation, I suspect that the issue may lie either within the browser or in the remote file mocha.min.css. Any insights or suggestions would be greatly appreciated.
P.S. In case it helps, I have attached the files index.html, style.css, and test.js for reference below:
/*
* 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>