测试：`错误：不变量违规：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。` 错误

Question

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

• 咖啡脚本
• 反应(+jsx)
• 业力
• 幻影
• 茉莉花

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

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，请在此处添加以下块以解决您的问题

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