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

Did you figure this out?

yeah, if you came up with a solution to this, i'd love to know about it too!

what was the resolution?

+1

+5 million. This is killing me.

+1

Figured it out.

The problem is that the testable component

var LayerLabelComponent = require('./layer-label-component')

is required before

global.window

is initialized.

This means that if the component has a

require('react')

in it, then that React gets initialized without a correct window.

I resolved my issue by moving the require to a beforeEach block.

@urmastalimaa this is still not working for me. Would you mind posting a working example from your code? The test "works" as long as I'm not calling setState... this is driving me crazy!

@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.