Problems with applications using Material UI

[treyspiva]

Our application uses Material UI. I am trying to test the application UI Structure using Story Shots. However, I am running into a few problems. Some I have worked around, however one I have not.

Able to Work Around
In material-ui/src/internal/EnhancedButton.js they are doing a few things during the componentDidMount event. Examples are:

• call injectStyle, uses document.createElement and document.body.appendChild to create the style element.
• call listenForTabPresses, which calls Events.on and passes in the window object. The Events class calls the following methods addEventListener, removeEventListener, attachEvent, and detachEvent

However, since Story Shots does not have a DOM the window and document objects was not present. I was able to get past these problems by providing a global mock.

global.document = {
    createElement: function () {
        return {}
    },
    body: {
        appendChild: function () {
        }
    },
    getElementById: function() {return null;},
    addEventListener: function() {},
    removeEventListener: function() {},
    attachEvent: function() {},
    detachEvent: function() {}
}
global.window = {
    addEventListener: function() {},
    removeEventListener: function() {},
    attachEvent: function() {},
    detachEvent: function() {}
};

Not Able to Work Around
Some components are using refs. For example in the DropDownMenu.js they are using a ref to get the components rootNode.

<div ... ref={(node) => { this.rootNode = node; }}  ...>
   ...
</div>

Since Story Shots does not have a DOM the node is undefined. Therefore this.rootNode is undefined and the component throws an error when rendering.

Does anyone know of any workarounds to the ref problem?