Calling setState in jsdom-based tests causing "Cannot render markup in a worker thread" error

Question

Calling setState in jsdom-based tests causing "Cannot render markup in a worker thread" error

4.1k views Asked by Ivan Krechetov At 26 December 2024 at 00:27

I'm testing my React components under jsdom using my own tiny "virtual browser" utility. Works just fine, until I'm trying to setState. For example, when testing a children ages input control:

describe('rendering according to the draft value', function () {
    var component;

    beforeEach(function () {
        component = TestUtils.renderIntoDocument(
            React.createElement(ChildrenInput, {value: []})
        );

        component.setState({draft: [{age: null}, {age: null}]}, done);
    });

    it('overrides the value property for the count', function () {
        assert.strictEqual(component.refs.count.props.value, 2);
    });

    it('overrides the value property for the ages', function () {
        assert.strictEqual(component.refs.age1.props.value, null);
    });
});

…on the setState line I'm getting:

Uncaught Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure window and document are available globally before requiring React when unit testing or use React.renderToString for server rendering.

I know that window and document globals are indeed set by the jsdom-based TestBrowser, like that:

global.document = jsdom.jsdom('<html><body></body></html>', jsdom.level(1, 'core'));
global.window = global.document.parentWindow;

I even tried to wrap setState into a setTimeout(..., 0). It doesn't help. How can I make testing the state changes work?

Original Q&A

There are 4 answers

markau On 16 January 2017 at 00:37

Nothing worked for me until I tried requiring jsdom-global in the mocha command:

--require jsdom-global/register

Source: https://github.com/rstacruz/jsdom-global/blob/master/README.md#mocha

Alexey Kureev On 09 July 2015 at 13:40

I've also got this error using Babel for testing ES6 code. The point is that there's a difference between import React from 'react' and const React = require('react'). If you're using import syntax, then all your imports would happend before anything else, so you can't mock window or document before.

So first bit is to replace import by require in the tests(where it matters)

The second bit is to mock global.navigator by using global.navigator = global.window.navigator.

Hope it'll help somebody.

leplatrem On 07 October 2015 at 15:30

If you use Mocha and Babel, you will need to setup jsdom before the compilers evaluate the React code.

// setup-jsdom.js

var jsdom = require("jsdom");

// Setup the jsdom environment
// @see https://github.com/facebook/react/issues/5046
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = global.window.navigator;

With the --require arg:

$ mocha --compilers js:babel/register --require ./test/setup-jsdom.js test/*.js

See https://github.com/facebook/react/issues/5046#issuecomment-146222515

Source

**Brigand** · Accepted Answer · 2014-11-11 18:49:21

At load time React determines if it can use DOM, and stores it as a boolean.

var canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);
ExecutionEnvironment.canUseDOM = canUseDOM;

This means that if it's loaded before those conditions will be true, it assumes it can't use DOM.

You could monkey patch it in your beforeEach.

require('fbjs/lib/ExecutionEnvironment').canUseDOM = true

Or you could fake it at first:

global.window = {}; global.window.document = {createElement: function(){}};

Or ensure that you don't load React before you set up JSDOM, which is the only way I'm positive about, but it's also the most difficult and bug prone.

Or you could report this as an issue, or inspect jest's source and see how it resolves it.

TechQA.

Calling setState in jsdom-based tests causing "Cannot render markup in a worker thread" error

There are 4 answers

Related Questions in NODE.JS

Related Questions in TESTING

Related Questions in REACTJS

Related Questions in JSDOM

Related Questions in REACTJS-TESTUTILS

Popular Questions

Popular Tags

Trending Questions