Menu
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
725
We 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.
This is an assertion/expectation library. expect/should/assert are function given by chai.
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)
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 components, or check if components have certain children or if they have certain props.
import MyComponent from ‘./MyComponent’;
import Foo from ‘./Foo’;
describe(‘<MyComponent />’, () => {
it(‘renders three <Foo /> components’, () => {
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
