JSDOM和jQuery没有一起工作 [英] JSDOM and jQuery not working together
问题描述
我对mocha和chai这样的测试环境很陌生，我希望通过以下在线教程进行练习，但似乎它不喜欢我的工作并给我一个错误说：
I'm pretty new to the test environment such as mocha and chai and I want to practice by following online tutorial but it seems that it does not like what I do and gives me an error saying:
global.document = _jsdom2.default.jsdom('<!doctype html><html><body></body></html>');
^
TypeError: _jsdom2.default.jsdom is not a function
My 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('<!doctype html><html><body></body></html>');
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(
<Provider store={createStore(reducers,state)}>
<ComponentClass {...props}/>
</Provider>
);
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 };
我想知道任何人都有类似我的问题，并知道如何解决这个问题。由于我不是很熟悉这个主题，我不知道如何调试它。
I was wondering that anyone has similar kind of issue like mine and know how to figure this out. Since I am not really familiar with this subject, I'm not sure how I can debug this.
这是我实现 const {JSDOM} = jsdom; 和新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.<anonymous> (/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.<anonymous> (/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 。根据文档：
First of all, it should be jsdom.JSDOM. Per the documentation:
基本用法
Basic usage
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
要使用 jsdom ，您将主要使用 JSDOM 构造函数，它是 jsdom 主模块的命名导出即可。
To use jsdom, you will primarily use the JSDOM constructor, which is a named export of the jsdom main module.
其次， JSDOM 是一个构造函数如上所述，所以你必须使用 new 关键字：
Second of all, JSDOM is a constructor as noted above, so you must use the new keyword:
import jsdom from 'jsdom';
global.document = new jsdom.JSDOM(...);
我会使用命名导入来导入特定的命名导出以使其更容易：
I would use named importing to import a specific named export to make this easier:
import { JSDOM } from 'jsdom';
global.document = new JSDOM(...);
最后，使用窗口而不是 defaultView 新API中不存在。它返回 undefined ，这就是jQuery无法工作的原因：
Finally, use window instead of defaultView which doesn't exist in the new API. It returns undefined and that's why jQuery won't work:
const $ = jquery(global.document.window);
这篇关于JSDOM和jQuery没有一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
