我測試時組件未呈現

Question

我有一個很奇怪的問題。 我使用jasmine 2.0 ， react 0.13.3 ， react-router 0.13.3和其他軟件包。 我有一個測試套件，它找不到findRenderedDOMComponentWithTag() 。 請考慮確切的示例：

React = require('react')
TestUtils = require('react/addons.js').addons.TestUtils
ReactRouterContext = require('../../helpers/react_router_context_helper.coffee')

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

describe 'NewSession', ->
  it 'should send the query after clicking on the button', ->
    instance = TestUtils.renderIntoDocument(<subject />)
    h3 = TestUtils.findRenderedDOMComponentWithTag(instance, 'h3') # can't find at least one h3 tag

  it 'should render wrong login/password on error', ->
    pending()

  it 'should process user after successful login', ->
    # localStorage
    # alt.js
    # redirect
    pending()

看起來非常有趣，因為組件渲染功能中有警報方法，但是沒有任何警報

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: ->
    alert 'hh'
    <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_router_context_helper.coffee
React = require('react')
objectAssign = require('object-assign')

module.exports = (Component, props, stubs) ->
  RouterStub = ->
  objectAssign RouterStub, {
    makePath: ->
    makeHref: ->
    transitionTo: ->
    replaceWith: ->
    goBack: ->
    getCurrentPath: ->
    getCurrentRoutes: ->
    getCurrentPathname: ->
    getCurrentParams: ->
    getCurrentQuery: ->
    isActive: ->
    getRouteAtDepth: ->
    setRouteComponentAtDepth: ->
  }, stubs

  React.createClass
    childContextTypes:
      router: React.PropTypes.func
      routeDepth: React.PropTypes.number
    getChildContext: ->
      {
        router: RouterStub
        routeDepth: 0
      }
    render: ->
      React.createElement Component, props

Answer 1

這似乎愚蠢，但我只需要更換subject ，以Subject 。 因此，React現在將我的變量視為組件類，而不是div標簽。

Subject = ReactRouterContext(NewSession)
instance = TestUtils.renderIntoDocument(<Subject />)