Enzyme: Error while testing component

[rizvified]

I'm testing a react HOC which checks if there's a token present in localstorage or not. If there is, it redirects the user to the Home component else the user will be redirected to the Login component.

However, i'm getting this strange error in the last test where it tests for calling componentDidMount

SecurityError
at HistoryImpl._sharedPushAndReplaceState (node_modules/jsdom/lib/jsdom/living/window/History-impl.js:87:15)
at HistoryImpl.pushState (node_modules/jsdom/lib/jsdom/living/window/History-impl.js:69:10)
at History.pushState (node_modules/jsdom/lib/jsdom/living/generated/History.js:72:31)

app.test.js

import React from 'react'; 
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';

import App from '../containers/App.jsx';

describe('<App />', () => {
  beforeAll(() => {
    global.localStorage = {
      i2x_token: 'someToken',
      getItem() {
        return 'someToken';
      }
    };
  });

  it('renders without exploding', () => {
    shallow(<App />);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <App>
        <div className='unique' />
      </App>,
   );
    expect(wrapper.contains(<div className='unique' />)).to.equal(true);
  });

 it('calls componentDidMount', () => {
    sinon.spy(App.prototype, 'componentDidMount');
    const wrapper = mount(<App />);
    expect(App.prototype.componentDidMount).to.have.property('callCount', 1);
    App.prototype.componentDidMount.restore();
  });
});

`
app.jsx

import React, { Component } from 'react';
import { browserHistory } from 'react-router';

class App extends Component {
  componentWillMount() {
    if (localStorage.i2x_token) {
       browserHistory.push('/home');
    } else {
      browserHistory.push('/');
    }
  }

  render() {
    return (
      <main>
        {React.Children.toArray(this.props.children)}
      </main>
    );
  }
}

App.propTypes = {
  children: React.PropTypes.node,
};

export default App;

package.json

  "dependencies": {
    "express": "^4.15.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "3.0.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^7.0.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "chai": "^3.5.0",
    "cross-env": "^3.1.3",
    "css-loader": "^0.28.0",
    "enzyme": "^2.8.2",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "file-loader": "^0.11.1",
    "jest": "^19.0.2",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "node-sass": "^4.5.2",
    "react-addons-test-utils": "^15.5.1",
    "sass-loader": "^3.2.0",
    "sinon": "^2.1.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  }

[ljharb]

This error is coming from jsdom, not enzyme. The only thing I can think of is changing beforeAll to beforeEach, or trying to stub local storage another way.

[Tix6]

JSDOM doesn't handle browserHistory,

you have to mock/stub localStorage AND browserHistory.