JSDOM和jQuery没有一起工作

我对mocha和chai这样的测试环境很陌生,我想通过以下在线教程进行练习,但似乎它不喜欢我的工作,并给我一个错误说:

global.document = _jsdom2.default.jsdom(''); ^ TypeError: _jsdom2.default.jsdom is not a function 

我的test_helper看起来像,

 import jsdom from 'jsdom'; import jquery from 'jquery'; import TestUtils from 'react-dom/test-utils'; import ReactDOM from 'react-dom'; import chai, { expect } from 'chai'; import React from 'react'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducers from '../src/reducers'; import chaiJquery from 'chai-jquery'; // Set up testing environment to run like a browser in the command line global.document = jsdom.jsdom(''); global.window = global.document.defaultView; const $ = jquery(global.window); // Build 'renderComponent' helper that should render a given react class function renderComponent(ComponentClass, props, state) { const componentInstance = TestUtils.renderIntoDocument(    ); return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML } // Build helper for simulating(or other) event // Set up chai-jquery chaiJquery(chai, chai.util, $); export default { renderComponent, expect }; 

我想知道任何人都有类似我的问题,并知道如何解决这个问题。 由于我对这个主题并不熟悉,所以我不确定如何调试它。


这是我实现const { JSDOM } = jsdom;之后的错误堆栈const { JSDOM } = jsdom;new JSDOM(...)

  if ( !w.document ) { ^ TypeError: Cannot read property 'document' of undefined at module.exports (/Users/cheewoonkim/Desktop/nodeapp/meanmapsapp/node_modules/jquery/dist/jquery.js:30:12) at Object. (/Users/cheewoonkim/Desktop/nodeapp/meanmapsapp/test/test_helper.js:17:11) at Module._compile (module.js:571:32) at loader (/Users/cheewoonkim/Desktop/nodeapp/meanmapsapp/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/cheewoonkim/Desktop/nodeapp/meanmapsapp/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at /Users/cheewoonkim/Desktop/nodeapp/meanmapsapp/node_modules/mocha/bin/_mocha:355:3 at Array.forEach (native) at Object. (/Users/cheewoonkim/Desktop/nodeapp/meanmapsapp/node_modules/mocha/bin/_mocha:354:10) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.runMain (module.js:605:10) at run (bootstrap_node.js:423:7) at startup (bootstrap_node.js:147:9) at bootstrap_node.js:538:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! budee_order_tracking@1.0.0 test: `mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test "--watch"` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the budee_order_tracking@1.0.0 test script 'mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test "--watch"'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the budee_order_tracking package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test "--watch" npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs budee_order_tracking npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls budee_order_tracking npm ERR! There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/cheewoonkim/.npm/_logs/2017-05-16T01_20_20_200Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! budee_order_tracking@1.0.0 test:watch: `npm run test -- --watch` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the budee_order_tracking@1.0.0 test:watch script 'npm run test -- --watch'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the budee_order_tracking package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! npm run test -- --watch npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs budee_order_tracking npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls budee_order_tracking npm ERR! There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/cheewoonkim/.npm/_logs/2017-05-16T01_20_20_215Z-debug.log 

首先,它应该是jsdom.JSDOM 。 根据文件 :

基本用法

 const jsdom = require("jsdom"); const { JSDOM } = jsdom; 

要使用jsdom ,您将主要使用JSDOM 构造函数 ,它是jsdom主模块命名导出

其次, JSDOM 如上所述的构造函数 ,因此您必须使用new关键字:

 import jsdom from 'jsdom'; global.document = new jsdom.JSDOM(...); 

我会使用命名导入来导入特定的命名导出以使其更容易:

 import { JSDOM } from 'jsdom'; global.document = new JSDOM(...); 

最后,使用window而不是新API 中不存在defaultView 。 它返回undefined ,这就是jQuery无法工作的原因:

 const $ = jquery(global.document.window); 

不同的语法:

 import jsdom from "jsdom"; import chai from "chai"; //... global.doc = new jsdom.JSDOM("..."); global.window = doc.window; 

new运算符在这里很重要,因为没有它就无法调用JSDOM。