reactjs在使用Jasmine进行测试时获取``未定义不是函数''

Question

I have a React components. I want to test them. But I get unexpected error on every trying to findRenderedDOMComponentWithTag with tested component. Here is the Karma error log:

05 09 2015 20:31:23.450:INFO [watcher]: Changed file "/tmp/35ffb917aab483a567d1be6fed779291.browserify".
PhantomJS 2.0.0 (Linux 0.0.0) DestroySession should process user logout FAILED
    TypeError: undefined is not a function (evaluating 'target.dispatchEvent(e)') in http://localhost:9876/karma.js (line 1134)
        at /tmp/35ffb917aab483a567d1be6fed779291.browserify:59730:16
PhantomJS 2.0.0 (Linux 0.0.0): Executed 3 of 7 (1 FAILED) (skipped 4) (0.04 secs / 0.019 secs)

My stack is:

• coffeescript
• react(+jsx)
• browserify
• karma.js
• phantomjs
• jasmine

Component:

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

Button = ReactBootstrap.Button

SessionActions = require('../../actions/session_actions.coffee')

module.exports = React.createClass
  contextTypes: router: React.PropTypes.func
  handleClick: (e) ->
    e.preventDefault()
    console.log 'хуйло'
    SessionActions.destroy()
    @context.router.transitionTo('/sessions/new')
  render: ->
    <Button onClick={@handleClick} className='btn btn-default navbar-btn'>Sign out</Button>

Test:

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

DestroySession = require('../../../../app/coffee/components/sessions/destroy.coffee')

describe 'DestroySession', ->
  instance = undefined

  beforeEach ->
    instance = TestUtils.renderIntoDocument(<DestroySession />)


  it 'should process user logout', ->
    localStorage.setItem('token', 123)
    localStorage.setItem('userName', 'Anonymous Person')
    localStorage.setItem('userId', 11)

    button = TestUtils.findRenderedDOMComponentWithTag(instance, 'button')

    console.log button

It's very strange, but I get an error when I try to console.log my button variable. If I comment out last line of my test, it will be passed. What's happened?

Answer 1

you need to call getDOMNode()

console.log button.getDOMNode()

Note : This is changing in 0.14.2 where TestUtils.find/scry methods will return the DOM node directly.

Answer 2

This is probably not the right answer, but I landed here because I got the exact same exception in Jasmine, and I uncovered what caused it, so I'll leave this here:

The mistake I made was to accidentally save the global document inside an object, instead of a local variable called document :

/*
var document = {
   parentId: parentItem._id, 
   childIds: [childItem._id],
};
I had moved the above elsewhere, so "document" now refers to window.document
*/
db.saveInIndex(parentId, document);

And later made a call to this:

console.log(db.getFromIndex(parentId));

Which resulted in this:

TypeError: undefined is not a function (evaluating 'target.dispatchEvent(e)')

Because it was trying to log an object that looked like this:

{
  parentId: 'HA89A8S98A98',
  document: <<< the global "document" - not what we wanted! >>>
}

That global var document would normally be the HTML contents of your page, but when you're running your tests against PhantomJS you get it's own interpretation of that!

(running Karma against Chrome gave a different exception)