Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a Worker thread.

deps

✗ npm list react mocha chai jsdom
[email protected] /Users/alex/Development/reactor
├── [email protected] 
├─┬ [email protected]
│ └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 
├── [email protected] 
├── [email protected] 
└── [email protected] 

gistfile1.sh

✗ mocha layer-label-component-spec.js

  ․

  0 passing (31ms)
  1 failing

  1) LayerLabelComponent should change the state layerName on change event:
     Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a Worker thread. This is likely a bug in the framework. Please report immediately.
      at invariant (/Users/alex/Development/reactor/node_modules/react/lib/invariant.js:49:15)
      at Object.Danger.dangerouslyRenderMarkup (/Users/alex/Development/reactor/node_modules/react/lib/Danger.js:61:46)
      at Object.DOMChildrenOperations.processUpdates (/Users/alex/Development/reactor/node_modules/react/lib/DOMChildrenOperations.js:138:33)
      at Object.ReactDOMIDOperations.dangerouslyProcessChildrenUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMIDOperations.js:184:29)
      at Object.dangerouslyProcessChildrenUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
      at processQueue (/Users/alex/Development/reactor/node_modules/react/lib/ReactMultiChild.js:145:40)
      at ReactMultiChild.Mixin.updateChildren (/Users/alex/Development/reactor/node_modules/react/lib/ReactMultiChild.js:259:40)
      at ReactDOMComponent.Mixin._updateDOMChildren (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMComponent.js:395:12)
      at ReactDOMComponent.Mixin.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMComponent.js:248:12)
      at null.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
      at ReactComponent.Mixin.performUpdateIfNecessary (/Users/alex/Development/reactor/node_modules/react/lib/ReactComponent.js:333:12)
      at ReactComponent.Mixin.receiveComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactComponent.js:314:12)
      at ReactDOMComponent.Mixin.receiveComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactDOMComponent.js:221:43)
      at ReactCompositeComponentMixin.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactCompositeComponent.js:1181:31)
      at null.updateComponent (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
      at ReactCompositeComponentMixin._performComponentUpdate (/Users/alex/Development/reactor/node_modules/react/lib/ReactCompositeComponent.js:1123:10)
      at ReactCompositeComponentMixin.performUpdateIfNecessary (/Users/alex/Development/reactor/node_modules/react/lib/ReactCompositeComponent.js:1063:14)
      at runBatchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:152:17)
      at ReactReconcileTransaction.Mixin.perform (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:141:20)
      at ReactUpdatesFlushTransaction.Mixin.perform (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:141:20)
      at ReactUpdatesFlushTransaction.mixInto.perform (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:98:38)
      at Object.<anonymous> (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:176:19)
      at Object.flushBatchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactPerf.js:57:21)
      at ReactDefaultBatchingStrategyTransaction.Mixin.closeAll (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:214:42)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/Users/alex/Development/reactor/node_modules/react/lib/Transaction.js:155:16)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactDefaultBatchingStrategy.js:70:19)
      at Object.batchedUpdates (/Users/alex/Development/reactor/node_modules/react/lib/ReactUpdates.js:113:20)
      at Object.change (/Users/alex/Development/reactor/node_modules/react/lib/ReactTestUtils.js:328:18)
      at Context.<anonymous> (/Users/alex/Development/reactor/client/tests/unit/components/layer-label-component-spec.js:32:24)
      at callFn (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:223:21)
      at Test.Runnable.run (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:216:7)
      at Runner.runTest (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:373:10)
      at /Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:451:12
      at next (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:298:14)
      at /Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:308:7
      at next (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:246:23)
      at /Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:270:7
      at done (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:185:5)
      at callFn (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:228:7)
      at Hook.Runnable.run (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runnable.js:216:7)
      at next (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:258:10)
      at Object._onImmediate (/Users/alex/.nvm/v0.10.29/lib/node_modules/mocha/lib/runner.js:275:5)
      at processImmediate [as _immediateCallback] (timers.js:336:15)

layer-label-component-spec.js

var jsdom               = require('jsdom')
var chai                = require('chai')
var TestUtils           = require('react/addons').addons.TestUtils;
var LayerLabelComponent = require('./layer-label-component')


global.should = chai.should();

var document = jsdom.jsdom('<html><body></body></html>', jsdom.level(1, 'core'))

before(function() {
  this.document   = document;
  global.document = this.document;
  global.window   = this.document.parentWindow;
});

describe('LayerLabelComponent', function() {

  beforeEach(function() {

  });

  it('should change the state layerName on change event', function() {
    var htmlContainer = this.document.createElement('div');
    var node = { properties: { name: 'something' } };

    var layerLabelComponent = LayerLabelComponent({node: node});
    var instance = TestUtils.renderIntoDocument(layerLabelComponent, htmlContainer);

    var input = TestUtils.findRenderedDOMComponentWithClass(instance, 'layer-input');

    TestUtils.Simulate.change(input, { target: { value: 'something_else' } })

    instance.state.layerName.should.eq('something_else')
  });
});

layer-label-component.js

var React    = require('react');
var classSet = React.addons.classSet;

var LayerLabelComponent = React.createClass({

  updateNodeName: function(event) {
    this.setState({layerName: event.target.value})
  },

  getInitialState: function() {
    return {
      editing: false,
      layerName: this.props.node.properties.name
    };
  },

  toggleEditing: function() {
    this.setState({editing: !this.state.editing})
  },

  componentDidUpdate: function(prevProps, prevState) {
    if(this.state.editing){
      // Excuse the hack to gain focus
      this.refs.layerInput.getDOMNode().focus()
    }
  },

  render: function() {
    var inputClass = classSet({ 'layer-input': true, 'is-hidden': !this.state.editing })
    var labelClass = classSet({ 'layer-name': true,  'is-hidden': this.state.editing })
    return (
      React.DOM.div({className: "layer-label"},
        React.DOM.form({className: "layer-input-form"},
          React.DOM.input({ ref: "layerInput",
                            className: inputClass,
                            value:  this.state.layerName,
                            onChange:  this.updateNodeName})
        ),
        React.DOM.div({className: labelClass, onClick:  this.toggleEditing},
           this.state.layerName
        )
      )
    );
  }

});

module.exports = LayerLabelComponent

@gzurbach Are you writing your tests in ES6?

If using ES6 syntax to import modules, you'll continue to encounter this error. ES6 "hoists" module imports to the top of the file, so they will be evaluated before global.document is set.

For example, this doesn't work:

import {jsdom} from "jsdom";

global.document = jsdom("<!doctype html><html><body></body></html>");
global.window = document.defaultView;
global.navigator = window.navigator;

import React from "react/addons";

But this does work (because require is not hoisted):

import {jsdom} from "jsdom";

global.document = jsdom("<!doctype html><html><body></body></html>");
global.window = document.defaultView;
global.navigator = window.navigator;

const React = require("react/addons");

If still unsure what I mean, see here for an ES6 → ES5 example.