1

I have a test environment with stack:

  • coffeescript
  • react(+jsx)
  • karma
  • phantomjs
  • jasmine

And I have this annoying error when I'm trying just to render the component:

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)

Here is the tested file

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: ->
    { error_text: '' }
  handleSubmit: (e) ->
    e.preventDefault()
    WebUtils.query
      path: 'sessions'
      data: @getFormData()
      type: 'POST'
      callback: ((result) ->
        if result.status == 'success'
          SessionActions.create(result)
          @context.router.transitionTo('/')
        else
          @setState error_text: 'Неправильные логин и/или пароль'
      ).bind(this)
  getFormData: ->
    {
      login: @refs.login.getValue(),
      password: @refs.password.getValue()
    }
  render: ->
    <form onSubmit={@handleSubmit}>
      <Row>
        <Col md={6} mdOffset={3} className='text-center'>
          <h3>Войти в систему</h3>

          { <ErrorMessage text={@state.error_text} /> if !!@state.error_text }

          <Input type='text' placeholder='Введите Ваш логин' ref='login' autoFocus />
          <Input type='password' placeholder='Пароль' ref='password' />
          <Button type='submit' bsStyle='success'>Вход</Button>
        </Col>
      </Row>
    </form>

there are the tests:

React = require('react/react-with-addons.js')
ReactTestUtils = React.addons.TestUtils

NewSession = require('../../../../app/coffee/components/sessions/new.coffee')

describe 'NewSession', ->
  it 'should send the query after clicking on the button', ->
    ReactTestUtils.renderIntoDocument(<NewSession />) # here comes the error

Error Message source:

React = require('react')
ReactBootstrap = require('react-bootstrap')

Alert = ReactBootstrap.Alert

module.exports = React.createClass
  render: ->
    <Alert bsStyle='danger' bsSize='small' className='text-left'>{@props.text}</Alert>

How can I avoid this error?

Rob
  • 14,746
  • 28
  • 47
  • 65
Alex Antonov
  • 14,134
  • 7
  • 65
  • 142
  • Can you paste ErrorMessage source? – plus- Sep 07 '15 at 09:14
  • I'm not familliar with coffee but the `{ if !!@state.error_text }` is weird to me. You're not supposed to run inline conditional in JSX without an IIFE. See https://facebook.github.io/react/tips/if-else-in-JSX.html Can you try without this part? Do you still have the same error? – plus- Sep 07 '15 at 09:42
  • This code is worked. Removing of it don't changes anything – Alex Antonov Sep 07 '15 at 09:59
  • Ok apparently this issue can arise when you load multiple version of reacts. See : http://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have-refs-mean?rq=1 I see you load react and react with addons on a component – plus- Sep 07 '15 at 11:08

1 Answers1

0

If you are using webpack.conf then add following block there it solve your issue

externals: [{
    'react': {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    }
  }, {
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  }]
Sunny
  • 468
  • 6
  • 22