Yaniv Efraim Yaniv Efraim - 23 days ago 19
React JSX Question

React + Enzyme error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread

I am testing a react component using Enzyme and I'm getting the following 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 ReactDOMServer.renderToString for server rendering


I added the following setup for jsdom, before requiring 'enzyme' (as I read in few places):

const baseMarkup = '<!DOCTYPE html><html><head><title></title></head><body></body></html>';
const window = require('jsdom').jsdom(baseMarkup).defaultView;

global.window = window;
global.document = window.document;
global.navigator = window.navigator;

const React = require('react');
const {mount} = require('enzyme');
const sinon = require('sinon');
const SortableInput = require('../../../src/components/sortableInput/sortableInput').default;


What am I doing wrong here?

EDIT

I don't think it is related to server side rendering. The message is general about unit testing and server side rendering.

Answer

Answering my own question, in case someone have the same issue. This was what eventually worked for me:

import 'jsdom-global/register';

describe('My awesome component test', () => {
  let cleanup;

  beforeEach(() => cleanup = require('jsdom-global')());

  afterEach(() => cleanup());

  ....
})