測試：'錯誤：違反不變：addComponentAsRefTo（...）：只有ReactOwner可以refs.`錯誤

Question

我有棧測試環境：

• CoffeeScript的
• 反應（+ JSX）
• 因緣
• phantomjs
• 茉莉

我有這個惱人的錯誤當我試圖只是爲了呈現組件：

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' 
    } 
    }]