title: React Testing - TypeError: localStorage.getItem is not a function
body: <p>I'm having trouble testing a react component that uses localstorage to save a JWT token and retrieves it for api calls and routing based on authentication.</p>
  
  <p>The component itself works fine, but when i test, i'm getting this error in all the three tests</p>
  
  <blockquote>
    <p>TypeError: localStorage.getItem is not a function</p>
  </blockquote>
  
  <p>Here is the code i have written</p>
  
  <p><strong>home.test.js</strong></p>
  
  <pre><code>import React from 'react';
  import { shallow, mount } from 'enzyme';
  import { expect } from 'chai';
  import sinon from 'sinon';
  
  import Home from '../containers/Home.jsx';
  
  
  describe('&lt;Home /&gt;', () =&gt; {
    beforeAll(() =&gt; {
      global.localStorage = {
        i2x_token: 'someToken',
      };
    });
  
    it('renders without exploding', () =&gt; {
      shallow(&lt;Home /&gt;);
    });
  
    it('renders children when passed in', () =&gt; {
      const wrapper = shallow(
        &lt;Home&gt;
          &lt;div className='unique' /&gt;
        &lt;/Home&gt;,
     );
      expect(wrapper.contains(&lt;div className='unique' /&gt;)).to.equal(true);
    });
  
    it('calls componentWillMount', () =&gt; {
      sinon.spy(Home.prototype, 'componentWillMount');
      const wrapper = mount(&lt;Home /&gt;);
  
  expect(Home.prototype.componentWillMount).to.have.property('callCount', 1);
      Home.prototype.componentWillMount.restore();
    });
  });
  </code></pre>
  
  <p><strong>home.jsx</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { browserHistory } from 'react-router';
  
  import Header from '../components/Header.jsx';
  import Content from '../components/Content.jsx';
  
  import { API_CONTENT } from '../utils/constants';
  import request from '../utils/request';
  
  class Home extends Component {
    constructor(props) {
      super(props);
      this.state = {
        content: null,
      };
      this.logout = this.logout.bind(this);
    }
  
    componentWillMount() {
      const token = localStorage.getItem('i2x_token');
      const requestURL = API_CONTENT;
      const requestObj = {
        method: 'GET',
        headers: new Headers({
          Authorization: `JWT ${token}`,
        }),
      };
      request(requestURL, requestObj).then((reply) =&gt; {
        if (reply.results.length &gt; 0) {
          this.setState({ content: reply.results });
         } else {
          console.log('no reply from API');
        }
      });
    }
  
    logout() {
       localStorage.removeItem('i2x_token');
       browserHistory.push('/');
     }
  
    render() {
      const data = this.state.content;
      if (data !== null) {
        return (
          &lt;div className='container'&gt;
            &lt;Header logout={ this.logout } /&gt;
            &lt;Content data={ this.state.content } /&gt;
          &lt;/div&gt;
        );
      }
      return (
        &lt;div className='container'&gt;
          &lt;Header logout={ this.logout } /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Home;
  </code></pre>