reactjs 在用 Jasmine 进行测试时得到`undefined is not a function`答案

【问题标题】：reactjs get `undefined is not a function` on testing with Jasminereactjs 在用 Jasmine 进行测试时得到`undefined is not a function`
【发布时间】：2015-12-01 16:02:12
【问题描述】：

我有一个 React 组件。我想测试它们。但是每次尝试使用经过测试的组件findRenderedDOMComponentWithTag 时都会出现意外错误。这是 Karma 错误日志：

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)

我的堆栈是：

咖啡脚本
反应(+jsx)
浏览
karma.js
幻影
茉莉花

组件：

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>

测试：

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

这很奇怪，但是当我尝试console.log 我的按钮变量时出现错误。如果我注释掉测试的最后一行，它将通过。发生了什么事？

【问题讨论】：

我也看到了这一点：我可以成功地对实例进行评估和测试，但是如果我将实例推送到 console.log，我会得到完全相同的错误。

标签： javascript coffeescript reactjs jasmine phantomjs

【解决方案1】：

您需要致电getDOMNode()

console.log button.getDOMNode()

注意：这在 0.14.2 中有所改变，其中 TestUtils.find/scry 方法将直接返回 DOM 节点。

【讨论】：

【解决方案2】：

这可能不是正确的答案，但我来到这里是因为我在 Jasmine 中遇到了完全相同的异常，并且我发现了导致它的原因，所以我将把它留在这里：

我犯的错误是不小心将全局 document 保存在一个对象中，而不是一个名为 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);

后来又调用了这个：

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

这导致了：

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

因为它试图记录一个看起来像这样的对象：

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

全局变量 document 通常是您页面的 HTML 内容，但是当您针对 PhantomJS 运行测试时，您会得到它自己的解释！

（针对 Chrome 运行 Karma 会出现不同的异常）

【讨论】：