title: Testing React-router component throws navigator is not defined
body: <p>I am writing a test spec for the component that uses browserHistory. It throws an error 
  ReferenceError: navigator is not defined</p>
  
  <p>i tried solution from <a href="https://stackoverflow.com/questions/37078882/mocha-chai-throws-navigator-not-defined-due-to-react-router-component">Mocha-Chai throws &quot;navigator not defined&quot; due to React-router component</a> but it is still not working. May be I  am not being able to use the solution in right way. </p>
  
  <p>Here is my spec file.</p>
  
  <pre><code>import React from 'react';
  import { expect } from 'chai';
  import jsdom from 'jsdom';
  import sinon from 'sinon';
  import shallow from 'enzyme';
  import { MyComponent } from 'component.jsx';
  
  const doc = jsdom.jsdom('&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;');
  global.document = doc;
  global.window = doc.defaultView;
  global.navigator = {
    userAgent: 'node.js',
  };
  
  describe('&lt;Component /&gt;', () =&gt; {
    let wrapper;
  
    before(() =&gt; {
      sinon.stub(Component.prototype, 'componentWillMount');
      wrapper = shallow(&lt;Component /&gt;);
    });
  
    context('Component', () =&gt; {
      it('should render component', () =&gt; {
        expect(wrapper.type()).to.equal('div');
      });
    });
  
    after(() =&gt; {
      Component.prototype.componentWillMount.restore();
    });
  });
  </code></pre>
  
  <p>Any help will be appreciated. Thank you.</p>
  
  <p>Here is component.jsx file</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import R from 'ramda';
  import { browserHistory } from 'react-router';
  
  export class MyComponent extends Component {
    componentWillMount() {
      const query = this.props.location.query;
      // looping through the query object of url
      R.mapObjIndexed((value, key) =&gt; this.prepareStateData(value, key), query);
    }
  
    componentDidUpdate(prevProps) {
      // this push the url every time the component is updated
      if (this.props.urlHistory &amp;&amp; this.props.urlHistory !== prevProps.urlHistory) {
        browserHistory.push(this.props.urlHistory);
      }
    }
  
    prepareStateData(value, key) {
      // this changes the state according to the url 
      switch (key) {
        case 'query1': {
            // do something
          break;
        }
        case 'query2': {
            // do something
          break;
        }
        default:
           // do something
          break;
      }
    }
  
    render() {
      return (
        &lt;div&gt;
         { /* render part */ }
        &lt;/div&gt;
      );
    }
  }
  
  MyComponent.propTypes = {
    location: PropTypes.object,
    urlHistory: PropTypes.string,
  };
  </code></pre>