javascript - 测试: `Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.` error

Question

我有一个带有堆栈的测试环境:

• CoffeeScript
• react (+jsx)
• 业力
• 幻影
• Jasmine

当我尝试渲染组件时，我遇到了这个恼人的错误:

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)

这是经过测试的文件

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>

有测试:

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

错误消息来源:

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>

如何避免此错误？

Answer 1

如果您正在使用 webpack.conf，则添加以下 block 即可解决您的问题

externals: [{
    'react': {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    }
  }, {
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  }]