Radium: Testing React components that use Radium with ShallowRenderer

Created on 17 Nov 2015 · 8Comments · Source: FormidableLabs/radium

Hi,

I've started a new project using React and Radium. I've been looking for online and seems that the best way to test React components is using ShallowRenderer whenever possible.

But, if that component is wrapped on Radium my output will be cluttered with:

Radium: userAgent should be supplied for server-side rendering. See https://github.com/FormidableLabs/radium/tree/master
/docs/api#radium for more information.
Either the global navigator was undefined or an invalid userAgent was provided. Using a valid userAgent? Please let us k
now and create an issue at https://github.com/rofrischmann/inline-style-prefixer/issues

I understand that I should define a userAgent for testing purposes. I thought that perhaps I needed to use a virtual dom like jsdom but that would defeat the hole purpose of shallow rendering.

I'm sure there is a simple solution I just can't find. So, what can I do to solve this?

Source

pepjo

Most helpful comment

Wouldn't it be better if Radium handles this in Radium.TestMode.enable()?

diegohaz on 9 Oct 2016

👍3

All 8 comments

You could try defining global.navigator.userAgent somewhere in your test setup, and assigning it a real userAgent, like one from the inline-style-prefixer tests. Let me know if that works.

ianobermiller on 18 Nov 2015

That worked perfectly! Thanks!

pepjo on 18 Nov 2015

This does not work with new ReactDOM

dom setup is:

import { jsdom } from 'jsdom';
import objectAssign from 'object-assign';

// Sets up global "document" and "window" variables which do not exist in the node run time using jsdom.
// This makes it possible to run tests which render React components.
const doc = jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

Object.keys(window).forEach((key) => {
  if (!(key in global)) {
    global[key] = window[key];
  }
});

global.navigator = { userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2454.85 Safari/537.36' };

// Setup support for Object.assign using objectAssign as a polyfill
Object.assign = objectAssign;

I get the following:

/Users/....../node_modules/react/lib/ReactDOM.js:66
        console.debug('Download the React DevTools for a better development experience: ' + 'https://fb.me/react-devtools');
                ^

TypeError: console.debug is not a function
    at Object.<anonymous> (/Users/wvaugh/repos/builder-reconcile/node_modules/react/lib/ReactDOM.js:66:17)

And everything runs fine (though I get warnings) if I remove the global.navigator line.

nackjicholson on 24 Dec 2015

why set global.navigator instead of window.navigator? Does that help at all?

ianobermiller on 24 Dec 2015

Using window.navigator does make this error go away. But, it doesn't make the userAgent warning go away. So no, doesn't really help.

If I move the setting of window.navigator up above the Object.keys() loop I'm doing, I get the same explosion as above.

Thanks for the help. I guess if I want to do unit testing and use radium I've got to just stomach all the "Unsupported style property @media" and the warning from this issue. I guess it's not that big of a deal, just ugly in the test output.

nackjicholson on 24 Dec 2015

+1 This is really annoying and I'm having the same problem as @nackjicholson