Minified React error #56 in React Unit Tests Fix

Published Sep 28, 2017

Every once-in-a-while you get stupid errors that don't tell you much as to where the issue lies with React when testing. This is one of them. Rather than hunt through the many things people have tried to fix this, let me give you mine.

The error shows up as so:

Invariant Violation: Minified React error #56; visit
Screen Shot 2017-09-28 at 2.24.24 PM.png

and when you go the FB page for this error, it doesn't help much at all:
Screen Shot 2017-09-28 at 2.46.10 PM.png

The problem:

jsdom needs to load before you import React into your code.

The Solution:

IMO the easiest and quickets way to get past this and move on is to:

1) update your scripts to include jsdom first
2) add a jsdom file to your app if you don't already have one

So from the command-line, you'd add the following to your mocha script for example from my package.json:

"test-isolated-unit": "NODE_ENV=development BABEL_DISABLE_CACHE=1 mocha
./src/test/mocha-webpack-compiler.js --require ./src/test/jsdom --compilers
js:babel-core/register --recursive ./src/test/unit/**/*.spec.js

What I added is --require ./src/test/jsdom


const jsdom = require('jsdom').jsdom;
const exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
global.navigator = window.navigator;

note: at the time of this post, I was using jsdom": "9.12.0, a new jsdom version that just came out fairly recently

Then your tests should run ok again:
success from webstorm's test runner
Screen Shot 2017-09-28 at 2.36.44 PM.png
Screen Shot 2017-09-28 at 2.28.11 PM.png

success from command-line:
Screen Shot 2017-09-28 at 2.30.46 PM.png

Discover and read more posts from Dave Schinkel
get started
Enjoy this post?

Leave a like and comment for Dave