问题
I'm using yeoman, grunt, mocha. I want to do BDD so I make basic unit test and run grunt test in console, which gives me ReferenceError: can't find variable: Creature opening test/index.html in browser works as it should.
This is my creature.js file in app/scripts:
'use strict';
var Creature = (function () {
function Creature(name) {
this.name = name;
}
Creature.prototype.sayHello = function (message) {
return this.name + ' ' + message;
};
Creature.prototype.eat = function (item){
return this.name + ' is eating ' + item;
}
return Creature;
})();
This is my test/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="bower_components/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="bower_components/mocha/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="bower_components/chai/chai.js"></script>
<script>
var assert = chai.assert;
var expect = chai.expect;
var should = chai.should();
</script>
<!-- include source files here... -->
<script src="../app/scripts/creature.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
<script>mocha.run()</script>
</body>
</html>
This is my test/spec/test.js file:
/* global describe, it */
(function () {
'use strict';
describe('Creature', function () {
describe('Comunnications', function () {
it('should say <name> hi', function () {
var creature = new Creature('test');
expect(creature.sayHello('hi')).to.equal('test hi');
});
it('should say <name> is eating <item>', function () {
var creature = new Creature('test');
expect(creature.eat('pear')).to.equal('test is eating pear');
});
});
});
})();
Console log:
Running "copy:styles" (copy) task
Done, without errors.
Running "autoprefixer:dist" (autoprefixer) task
Running "connect:test" (connect) task
Started connect web server on http://localhost:9001
Running "mocha:all" (mocha) task
Testing: http://localhost:9001/index.html
..
0 passing (113ms)
2 failing
1) Creature Comunnications should say <name> hi:
ReferenceError: Can't find variable: Creature
at http://localhost:9001/spec/test.js:9
at http://localhost:9001/bower_components/mocha/mocha.js:4263
at http://localhost:9001/bower_components/mocha/mocha.js:4635
at http://localhost:9001/bower_components/mocha/mocha.js:4694
at next (http://localhost:9001/bower_components/mocha/mocha.js:4561)
at http://localhost:9001/bower_components/mocha/mocha.js:4570
at next (http://localhost:9001/bower_components/mocha/mocha.js:4514)
at http://localhost:9001/bower_components/mocha/mocha.js:4538
at timeslice (http://localhost:9001/bower_components/mocha/mocha.js:5531)
2) Creature Comunnications should say <name> is eating <item>:
ReferenceError: Can't find variable: Creature
at http://localhost:9001/spec/test.js:13
at http://localhost:9001/bower_components/mocha/mocha.js:4263
at http://localhost:9001/bower_components/mocha/mocha.js:4635
at http://localhost:9001/bower_components/mocha/mocha.js:4694
at next (http://localhost:9001/bower_components/mocha/mocha.js:4561)
at http://localhost:9001/bower_components/mocha/mocha.js:4570
at next (http://localhost:9001/bower_components/mocha/mocha.js:4514)
at http://localhost:9001/bower_components/mocha/mocha.js:4538
at timeslice (http://localhost:9001/bower_components/mocha/mocha.js:5531)
>> 2/2 tests failed (0.11s)
Warning: Task "mocha:all" failed. Use --force to continue.
Aborted due to warnings.
Execution Time (2014-06-08 14:40:23 UTC)
concurrent:test 3s ■■■■■■■■■■■■■■■ 32%
connect:test 447ms ■■■ 5%
mocha:all 5.9s ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 63%
Total 9.4s
Perhaps it has to do with the reference to ../app/scripts/creature.js when running through phantomjs it has a different path compared to using it in a real browser?
EDIT
It seems like grunt test opens the wrong path to test on. It seems to open root/index.html When it opens... I got it to work by changing the path to the creature.js (removed the app/)
<!-- include source files here... -->
<script src="../scripts/creature.js"></script>
However when running grunt test it now works, but opening the test/index.html file it now gives me the error ReferenceError: Creature is not defined in firebug console.
Do I do something wrong or is that de correct behaviour? Anything I can do to make it work both ways?
I discovered where the issue was by changing the gruntfile.js changed test:options:open to true.
// The actual grunt server settings
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
...
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
...
}
}
}
Thanks in advance!
Possibly related to Running Mocha on the command line and Including a file
回答1:
This is probably because of this line. connect.static(config.app). Running it on the commandline, it runs connect, and sets the root/base path (where it reads the file) to app and test. So if you remove app it works for commandline, however if you are running it as a file, it is relative, hence needing 'app'
回答2:
probably you call
<script>mocha.run()</script>
when DOM is not ready yet try this
<script>
if( document.readyState === "complete" ) {
var creature = new Creature('test');
alert(creature .name);
//mocha.run()
}
</script>
or with jQuery
$(function() {
var creature = new Creature('test');
alert(creature .name);
//mocha.run()
});
回答3:
Have you tried putting
<script src="../app/scripts/creature.js"></script>
before
<script src="bower_components/mocha/mocha.js"></script>
It looks like the var isn't defined and probably what volkinc was after with his response.
来源：https://stackoverflow.com/questions/24107323/referenceerror-cant-find-variable-x-when-using-grunt-test-in-yeoman