5

While trying to setup a test environment I ran into the following problem. When I run the tests (using mocha ./src/test/.setup.js ./src/test/**.test.js), I get a Element is not defined error:

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

How is this possible, isn't Element a basic DOM element?

The following versions are used:

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

The following .setup.js file is used:

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;

And the test file is as follows:

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);
    });
});
corneyl
  • 418
  • 1
  • 5
  • 10

1 Answers1

4

onsenui seems to be written for a browser enviroment, whilst you're executing it in a nodejs enviroment.

Element is a DOM api. nodejs has no DOM.

You could research using jsDom which is a node module that mimics the browser DOM for nodejs.

Edit: I think this package could solve your problems: https://github.com/rstacruz/jsdom-global I checked, it should place a 'Element' property in the global.

Norbert
  • 603
  • 5
  • 10
  • I'm already using jsDOM, see the test-setup file `.setup.js`. Maybe jsDOM has no support for the Element api? – corneyl Sep 06 '16 at 22:07
  • 2
    `jsdom-global` indeed solved this error, but there are still other errors, turns out that jsDOM also has poor support for webcomponents. This answer helped me best, but I will try to switch to the Karma runner to prevent other errors. – corneyl Sep 07 '16 at 18:14