title: React components render correctly in browser, but Jest test errors when rendering: "Only a ReactOwner can have refs"
body: <p>I have two components in React that render just fine and produce expected behavior in the browser, but can't seem to be rendered when running a test via Jest.</p>
  <h3>descriptions.js</h3>
  <pre><code>var React = require('react/addons');
  var $ = require('jquery');
  var Description = require('./description.js');
  
  var Descriptions = React.createClass({
      getInitialState: function () { //container always starts with at least one description field that is empty, or whatever is contained in props
          var descriptions = [];
          if (this.props.info == null) {
              descriptions.push({num: 0, data: ''});
          } else {
              $.each(this.props.info, function (i, string) {
                  descriptions.push({num: i, data: string});
              });
              if (descriptions.length == 0) { //we want at least one description field at all times
                  descriptions.push({num: 0, data: ''});
              }
          }
          return {descriptions: descriptions, focus: -1};
      },
      componentWillReceiveProps: function (nextProps) { //props are updated
          var descriptions = []; //we don't care about previous values, so we will make a new list
          $.each(nextProps.info, function (i, string) {
              descriptions.push({num: i, data: string});
          });
          if (descriptions.length == 0) { //we want at least one description field at all times
              descriptions.push({num: 0, data: ''});
          }
          this.setState({descriptions: descriptions});
      },
      addDescription: function (pos) { //adds a new description underneath the last one in the container
          var descriptions = this.state.descriptions;
          var max = 0;
          $.each(descriptions, function (i, item) {
              if (item.num &gt; max) max = item.num;
          });
          descriptions.splice(pos + 1, 0, {num: max + 1, data: ''});
          this.setState({descriptions: descriptions, focus: pos + 1}); //focus the new description
      },
      removeDescription: function (pos) { //remove a description from the array given its array position
          var descriptions = this.state.descriptions;
          if (descriptions.length != 1) {
              descriptions.splice(pos, 1);
              this.setState({descriptions: descriptions, focus: pos == 0 ? 0 : pos - 1});
          }
      },
      render: function () {
          var items = this.state.descriptions.map(function (item, i) { //add one Description for every item in the array
              return (
                  &lt;Description key={item.num} addDescription={this.addDescription}
                               removeDescription={this.removeDescription}
                               descriptionNum={i} focus={i == this.state.focus} data={item.data}/&gt;
              );
          }.bind(this));
          return (
              &lt;div className=&quot;descriptions&quot;&gt;
                  {items}
              &lt;/div&gt;
          );
  
      }
  });
  
  module.exports = Descriptions;
  </code></pre>
  <p>Essentially, this component is a container for one or more child &quot;Description&quot; components, and the amount of &quot;Description&quot; components that need to be rendered depends on the passed <code>info</code> prop, which holds an array of strings.</p>
  <h3>description.js</h3>
  <pre><code>var React = require('react/addons');
  
  var Description = React.createClass({
      mixins: [React.addons.LinkedStateMixin],
      componentDidMount: function () { //focus the input if it was added after page load
          if (this.props.focus) {
              this.refs.descInput.getDOMNode().focus();
          }
      },
      componentWillReceiveProps: function (nextProps) {
          if (nextProps.focus) {
              this.refs.descInput.getDOMNode().focus();
          }
          this.setState({description: nextProps.data});
      },
      getInitialState: function () {
          return({description: this.props.data});
      },
      handleKeyDown: function (e) {
          var key = e.keyCode;
          if (key == 13) { //enter is pressed, we need to add a new line underneath this one
              e.preventDefault();
              this.props.addDescription(this.props.descriptionNum);
          } else if (key == 8) { //backspace was pressed, check to see if line is empty and remove if so
              var value = this.refs.descInput.getDOMNode().value;
              if (value == null || value == '') {
                  e.preventDefault();
                  this.props.removeDescription(this.props.descriptionNum);
              }
          }
      },
      render: function () {
          return (
              &lt;div className=&quot;description&quot;&gt;
                  &lt;input type=&quot;text&quot; onKeyDown={this.handleKeyDown} valueLink={this.linkState('description')} ref=&quot;descInput&quot;/&gt;
              &lt;/div&gt;
          )
      }
  });
  
  module.exports = Description;
  </code></pre>
  <p>This component receives a string (or nothing), sets its state to contain that string, and uses the <code>LinkedStateMixin</code> to update the state whenever the value of the input changes, and vice-versa.</p>
  <p>I thought I had no issues with these components, but the following Jest test...</p>
  <h3>descriptions-test.js</h3>
  <pre><code>jest.dontMock('../js/descriptions.js');
  var React = require('react/addons');
  var TestUtils = React.addons.TestUtils;
  
  describe('Descriptions', function () {
      it('creates exactly two Description components when given a string array of length 2', function() {
          jest.dontMock('../js/description.js');
          var Description = require('../js/description.js');
          var info = ['foo','bar'];
          var Descriptions = require('../js/descriptions.js');
          var descriptions = TestUtils.renderIntoDocument(&lt;Descriptions info={info}/&gt;);
          var array = TestUtils.scryRenderedComponentsWithType(descriptions, Description);
          expect(array.length).toEqual(2);
      });
  });
  </code></pre>
  <p>...fails with the following error:</p>
  <pre><code>● Descriptions › it mocks Description exactly twice when given info array of length 2
    - Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
  </code></pre>
  <p>...on this line:</p>
  <pre><code>var descriptions = TestUtils.renderIntoDocument(&lt;Descriptions info={info}/&gt;);
  </code></pre>
  <p>This makes no sense to me as the components render fine in the browser without any issues.  It seems to only break when React's TestUtils attempts to do it.</p>
  <p>Here are my dependencies:</p>
  <h3>package.json</h3>
  <pre><code>&quot;dependencies&quot;: {
    &quot;jquery&quot;: &quot;^2.1.4&quot;,
    &quot;react&quot;: &quot;^0.13.3&quot;,
    &quot;react-tools&quot;: &quot;^0.13.3&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;browserify&quot;: &quot;^10.2.1&quot;,
    &quot;gulp&quot;: &quot;^3.8.11&quot;,
    &quot;gulp-react&quot;: &quot;^3.0.1&quot;,
    &quot;gulp-shell&quot;: &quot;^0.4.1&quot;,
    &quot;gulp-streamify&quot;: &quot;0.0.5&quot;,
    &quot;gulp-uglify&quot;: &quot;~1.1.0&quot;,
    &quot;jest-cli&quot;: &quot;^0.4.5&quot;,
    &quot;node-libs-browser&quot;: &quot;^0.5.2&quot;,
    &quot;reactify&quot;: &quot;^1.1.1&quot;,
    &quot;vinyl-source-stream&quot;: &quot;^1.1.0&quot;,
    &quot;watchify&quot;: &quot;^3.2.1&quot;,
    &quot;webpack&quot;: &quot;^1.9.10&quot;
  }
  </code></pre>
  <p>Does anyone know what might be causing this error?</p>