I am new to reactJS and try to learn how to test with it. I have encouter the following testing util method. However i am keep getting the same error message:ReferenceErro
tl;dr; You need jsdom
+ Mocha
.
According to spec ReactTestUtils#renderIntoDocument,
renderIntoDocument() requires a DOM:
You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.
Traditionally, Unit testing in React is done using Jest
, which apparently contains DOM support. And Mocha
doesn't.
To understand this, consider this overly simplify analogy, Jest
= Mocha
+ jsdom
.
jsdom
is implemented in JavaScript, we can have a DOM-like API to work with without needing a browser. That means that we don’t have to capture a browser in order test, like Karma
(which is why it works the moment you use Karma
). Hence, we can run our tests in environments without browsers, like in Node or in continuous integration environments.
References:
You need a DOM. Fortunately, jsdomify makes it easy to attach a DOM to your globals in Node.
Suppose we have a simple component:
var React = require('react');
module.exports = React.createClass({
displayName: 'Foo',
componentDidMount: function() {
console.log('componentDidMount called');
},
render: function() {
return (
<p>hello world</p>
);
}
});
We can test this with renderIntoDocument
. Here's an example using tape:
var jsdomify = require('jsdomify').default;
// We don't want to require React until we've set up the DOM
// (see the jsdomify docs).
var React;
var test = require('tape');
test('Render a Foo component with full react lifecycle', function (t) {
jsdomify.create();
React = require('react');
var Foo = require('../Foo.jsx');
// Full render to trigger componentDidMount.
var ReactTestUtils = require('react-addons-test-utils');
var renderer = ReactTestUtils.renderIntoDocument(<Foo/>);
var result = renderer.render();
// Cleans up global variables inserted by jsdomify.create.
jsdomify.destroy();
t.equal(result.props.children, 'hello world');
t.end();
});