logo标签列表

JSDOM和jQuery不能一起使用

javascriptjqueryecmascript-6jsdomreact-dom
3

我对像mocha和chai这样的测试环境还比较陌生，想通过跟随在线教程来练习，但似乎不喜欢我的操作方式，会给出一个错误提示：

global.document = _jsdom2.default.jsdom('<!doctype html><html><body></body></html>');
                                  ^
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('<!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 };

我想知道是否有人遇到过类似的问题并知道如何解决。由于我对这个主题不是很熟悉，所以不确定如何调试。
在我实现了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.<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
你多打了一个e。 - Andrew Li
@AndrewLi 对不起，那是我的打字错误，但它仍然无法工作。 - ckim16
错误有变化吗？ - Andrew Li
实际上是这样的，global.document = _jsdom2.default.JSDOM('<!doctype html><html><body></body></html>'); ^ TypeError: 不能在没有 'new' 的情况下调用类构造函数 JSDOM。 - ckim16
但是如果没有新的关键字，它仍然无法正常工作。 - ckim16
显示剩余2条评论
2个回答
9

首先，应该使用jsdom.JSDOM。根据文档：

Basic usage

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

To use jsdom, you will primarily use the JSDOM constructor, which is a named export of the jsdom main module.

其次，正如上面所提到的，JSDOM 是一个构造函数，因此您必须使用 new 关键字：

import jsdom from 'jsdom';

global.document = new jsdom.JSDOM(...);

我会使用命名导入来导入特定的命名导出，以使这更加容易：

import { JSDOM } from 'jsdom';

global.document = new JSDOM(...);

最后，使用window代替defaultView，因为在新的API中不存在defaultView。它返回undefined，这就是为什么jQuery无法工作的原因：

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

一种不同的语法：

import jsdom from "jsdom";
import chai from "chai";
//...

global.doc = new jsdom.JSDOM("...");
global.window = doc.window;

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接