使用Mocha测试ReactJS时undefined不是函数
[英]undefined is not a function while testing ReactJS using Mocha
问题描述
I am trying to test a simple page having form with 2 input fields using ReactJs and Mocha . 
我正在尝试使用ReactJs和Mocha测试具有2个输入字段的表单的简单页面。
When I run the test I am getting the error: 当我运行测试时，出现错误：
TypeError: undefined is not a function
at module.exports (/Users/johnp/Documents/myapp/work/projects/myapp-etd-portal/test/setup.js:5:35)
at Object.<anonymous> (/Users/johnp/Documents/myapp/work/projects/myapp-etd-portal/test/component/NameTest.js:1:28)
at Module._compile (module.js:460:26)
at normalLoader (/Users/johnp/Documents/myapp/work/projects/myapp-etd-portal/node_modules/babel/node_modules/babel-core/lib/babel/api/register/node.js:160:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/johnp/Documents/myapp/work/projects/myapp-etd-portal/node_modules/babel/node_modules/babel-core/lib/babel/api/register/node.js:173:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at /Users/johnp/Documents/myapp/work/projects/myapp-etd-portal/node_modules/mocha/lib/mocha.js:192:27
Below are my code files: 以下是我的代码文件：
1.setup.js: basic set-up file 1.setup.js：基本设置文件
module.exports = function(markup) {
if (typeof document !== 'undefined') return
var jsdom = require("jsdom").jsdom
global.document = jsdom(markup || '')
global.window = document.createWindow()
var chai = require('chai');
chai.config.includeStack = true;
global.expect = chai.expect;
}
NameTest.js: actual test page. NameTest.js：实际测试页面。
NameTest.js
require('../../test/setup')('<!doctype html><html><body></body></html>')
var React = require('react')
var ReactAddons = require('react/addons')
var TestUtils = React.addons.TestUtils
describe('Name page component', function(){
before('render element', function() {
try {
var renderedComponent = TestUtils.renderToString(
<InputFieldItem />
);
} catch (e) {
throw new Error(e);
}
});
it('First & Last <input> fields should be of type "text"', function() {
this.formElement = React.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(renderedComponent, 'form'))
this.firstNameElement = React.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'input')[0])
this.lastNameElement = React.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'input')[1])
});
});
I have my gulp task set up and I run the test using: gulp bundle && npm run test. 我已经设置了gulp任务，并使用以下命令运行测试：gulp bundle && npm run test。 It has been very frustrating to look for a solution and appreciate any help to resolve this issue. 寻找解决方案并感谢您提供任何解决此问题的帮助，这非常令人沮丧。
2 个解决方案
解决方案1
0 2015-06-12 02:08:00
As the stack trace shows, undefined is not a function at setup.js:5:35 (line 5, column 35). 如堆栈跟踪所示， setup.js:5:35 （第5行，第35列）处的undefined is not a function 。
global.document = jsdom(markup || '')
global.window = document.createWindow() // <-- refers to this
Assigning something to node's global object by doing global.document = ... , is not the same as creating a document variable in the global scope. 通过执行global.document = ...为节点的global对象分配某些内容与在全局范围内创建document变量不同。 To access something on node's global object you will always access it as a property, so do this: 要访问节点的全局对象上的某些内容，您将始终将其作为属性访问，因此请执行以下操作：
global.window = global.document.createWindow();
解决方案2
0 2015-06-12 08:16:12
开关document.createWindow()的document.defaultView按照该文档 ，它会工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.