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 ponents. 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
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 ponents. 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
Share Improve this question edited Nov 16, 2017 at 13:19 Mario Nikolaus 2,4061 gold badge23 silver badges29 bronze badges asked Nov 16, 2017 at 12:19 msc87msc87 1,0394 gold badges19 silver badges44 bronze badges 1-
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./billtrik/karma-fixture). Lastly, your html is malformed. There is no opening body tag – Max Sindwani Commented Nov 22, 2017 at 19:24
2 Answers
Reset to default 8 +25We have many testing tools to test React applications. Some of them can be confusing for beginners to understand what exactly they are used for. Below I clarified the different tools and what they are primarily used for.
Chai
This is an assertion/expectation library. expect/should/assert are function given by chai.
Mocha / Jasmine
This is a test runner, used to run your tests and log your test results.
describe/it/beforeEach : functions by mocha/jasmine are used to organize your test.
describe → Describe a function
it → Specify what certain conditions are met. Lives inside the describe
beforeEach → Setup tests before it starts
An example of test:
describe "Strawberry"
- it "is red"
- expect(strawberry.color).to.be('red')
- it "a type of fruit"
- expect(strawberry.type).to.be('fruit)
Enzyme
JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components. It simulates ReactDOM, and React Components like JQuery finding DOM.
It can be used to shallow render React ponents, or check if ponents have certain children or if they have certain props.
import MyComponent from ‘./MyComponent’;
import Foo from ‘./Foo’;
describe(‘<MyComponent />’, () => {
it(‘renders three <Foo /> ponents’, () => {
const wrapper = shallow(<MyComponent foo=’bar’ />);
expect(wrapper.find(Foo)).to.have.length(3);
expect(wrapper.props().foo).to.equal(‘bar’);
});
});
Are you using js-fixtures? Then you need to write:
fixtures.load('index.htm'); // <--- fixtureS not fixture!