-
-
Save PrototypeAlex/0a2b9a5c3e86ee0c8ed3 to your computer and use it in GitHub Desktop.
Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a Worker thread.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ✗ npm list react mocha chai jsdom | |
| reactor@0.0.1 /Users/alex/Development/reactor | |
| ├── chai@1.9.1 | |
| ├─┬ gulp-mocha@0.4.1 | |
| │ └── mocha@1.20.1 | |
| ├─┬ gulp-sass@0.7.2 | |
| │ └─┬ node-sass@0.9.3 | |
| │ └── mocha@1.18.2 | |
| ├── jsdom@0.11.1 | |
| ├── mocha@1.20.1 | |
| └── react@0.11.1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ✗ 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
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.windowis 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Did you figure this out?