title: Testing: `Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.` error
body: <p>I have a test environment with stack:</p>
  
  <ul>
  <li>coffeescript</li>
  <li>react(+jsx)</li>
  <li>karma</li>
  <li>phantomjs</li>
  <li>jasmine</li>
  </ul>
  
  <p>And I have this annoying error when I'm trying just to render the component:</p>
  
  <pre><code>PhantomJS 2.0.0 (Linux 0.0.0) NewSession should send the query after clicking on the button FAILED
      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. in /tmp/35ffb917aab483a567d1be6fed779291.browserify (line 38759)
  </code></pre>
  
  <p>Here is the tested file</p>
  
  <pre><code>React = require('react')
  ReactBootstrap = require('react-bootstrap')
  
  Row = ReactBootstrap.Row
  Col = ReactBootstrap.Col
  Input = ReactBootstrap.Input
  Button = ReactBootstrap.Button
  
  WebUtils = require('../../web_utils.coffee')
  SessionActions = require('../../actions/session_actions.coffee')
  
  ErrorMessage = require('../error_message.coffee')
  
  module.exports = React.createClass
    contextTypes: router: React.PropTypes.func
    getInitialState: -&gt;
      { error_text: '' }
    handleSubmit: (e) -&gt;
      e.preventDefault()
      WebUtils.query
        path: 'sessions'
        data: @getFormData()
        type: 'POST'
        callback: ((result) -&gt;
          if result.status == 'success'
            SessionActions.create(result)
            @context.router.transitionTo('/')
          else
            @setState error_text: 'Неправильные логин и/или пароль'
        ).bind(this)
    getFormData: -&gt;
      {
        login: @refs.login.getValue(),
        password: @refs.password.getValue()
      }
    render: -&gt;
      &lt;form onSubmit={@handleSubmit}&gt;
        &lt;Row&gt;
          &lt;Col md={6} mdOffset={3} className='text-center'&gt;
            &lt;h3&gt;Войти в систему&lt;/h3&gt;
  
            { &lt;ErrorMessage text={@state.error_text} /&gt; if !!@state.error_text }
  
            &lt;Input type='text' placeholder='Введите Ваш логин' ref='login' autoFocus /&gt;
            &lt;Input type='password' placeholder='Пароль' ref='password' /&gt;
            &lt;Button type='submit' bsStyle='success'&gt;Вход&lt;/Button&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>there are the tests:</p>
  
  <pre><code>React = require('react/react-with-addons.js')
  ReactTestUtils = React.addons.TestUtils
  
  NewSession = require('../../../../app/coffee/components/sessions/new.coffee')
  
  describe 'NewSession', -&gt;
    it 'should send the query after clicking on the button', -&gt;
      ReactTestUtils.renderIntoDocument(&lt;NewSession /&gt;) # here comes the error
  </code></pre>
  
  <p>Error Message source:</p>
  
  <pre><code>React = require('react')
  ReactBootstrap = require('react-bootstrap')
  
  Alert = ReactBootstrap.Alert
  
  module.exports = React.createClass
    render: -&gt;
      &lt;Alert bsStyle='danger' bsSize='small' className='text-left'&gt;{@props.text}&lt;/Alert&gt;
  </code></pre>
  
  <p>How can I avoid this error?</p>