I am very new to react and I have written a code using React 14 without any transpiler. Now I want to use Karma-Jasmine for unit testing but it seems that my test is failing rendering the app.
I have the following structure:
node_modules
MyApp/
/js/ *.js
/test/*.js
Karma.conf.js
package.json
index.html
My index.html:
<html>
<div id="content"></div>
<script src="js/react-0.14.7.js"></script>
<script src="js/react-dom-0.14.7.js"></script>
<script src="js/App.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="style.css">
</body>
</html>
My main.js:
ReactDOM.render(React.createElement(App), document.getElementById('content'))
My App then is like below:
var h = React.createElement;
var Command = React.createClass({
render: function(){
return h(....)
}
})
my test code is as follows:
describe('App', function() {
beforeEach(function() {
fixture.load('index.htm');
});
beforeEach(function () {
ReactDOM.render(React.createElement(App), document.getElementById('content'));
});
it('accepts elements', function() {
document.getElementById('x').value = 1;
document.getElementById('y').value = 2;
document.getElementById('setbtn').click();
});
});
And here is the error:
Uncaught ReferenceError: App is not defined
at main.js:2
(anonymous) @ main.js:2
debug.html:1 (WEB_PAGE context) Lazy require of app.binding did not set the binding field
.
.
.
ReferenceError: fixture is not defined
at UserContext.<anonymous> (main.test.js:6)
Debugging Karma shows my files have been loaded as I can see the functions in my components. I installed Html2js and added to my Karma.conf.js. I have read most of the documents on the web but they didn't help.
What am I doing wrong? I
Uncaught ReferenceError: App is not defined
- seems like you're exporting it as a global variable called "Command" rather than "App". Also, you need to include karma-fixture (see the installation instructions at github.com/billtrik/karma-fixture). Lastly, your html is malformed. There is no opening body tag – Max Sindwani Nov 22 '17 at 19:24