`ReferenceError: Element is not defined` when running mocha tests on React+Onsenui app

Question

在尝试设置测试环境时，我运行遇到了以下问题。当我运行测试（使用 mocha ./src/test/.setup.js ./src/test/**.test.js）时，我得到一个 Element is not defined 错误：

app\node_modules\onsenui\js\onsenui.js:603
  var originalCreateShadowRoot = Element.prototype.createShadowRoot;
                                 ^

ReferenceError: Element is not defined
    at app\node_modules\onsenui\js\onsenui.js:603:34
    at app\node_modules\onsenui\js\onsenui.js:359:7
    at Array.forEach (native)
    at initializeModules (app\node_modules\onsenui\js\onsenui.js:358:13)
    at app\node_modules\onsenui\js\onsenui.js:908:5
    (...)

这怎么可能，Element不是基本的DOM元素吗？

使用了以下版本：

酶@2.4.1
mocha@3.0.2
onsenui@2.0.0-rc.17
react@15.3.1
react-onsenui@0.7.5

使用以下 .setup.js 文件：

require('babel-register')({
    presets: ["react","airbnb","es2015"]
});

var jsdom = require('jsdom').jsdom;

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
    if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
    }
});

global.navigator = {
    userAgent: 'node.js'
};

documentRef = document;

而测试文件如下：

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';

import * as Ons from 'react-onsenui';
import MainPage from '../react/MainPage/MainPage.jsx';

describe("Component MainPage", function() {
    it("should have a Ons.Page component", function() {
        const wrapper = mount(<MainPage />);
        expect(wrapper.find(Ons.Page)).to.equal(true);
    });
});

Answer 1

onsenui 似乎是为浏览器环境编写的，而您在 nodejs 环境中执行它。

元素是 DOM api。 nodejs没有DOM.

您可以使用 jsDom 进行研究，它是一个模仿 nodejs 浏览器 DOM 的节点模块。

编辑：我认为这个包可以解决你的问题： https://github.com/rstacruz/jsdom-global 我检查过，它应该在全局中放置一个 'Element' 属性。

`ReferenceError: Element is not defined` when running mocha tests on React+Onsenui app

`ReferenceError: Element is not defined` when running mocha tests on React+Onsenui app

reactjs

mocha.js

enzyme

onsen-ui2