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
    (...)

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

使用以下版本：

enzyme@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我检查过，它应该放置一个＆＃39;元素＆＃39;全球的财产。

`ReferenceError：在React + Onsenui应用程序

1 个答案: