React Testing - TypeError：localStorage.getItemは関数ではありません

Question

localstorageを使用してJWTトークンを保存する反応コンポーネントをテストする際に問題があり、認証に基づいてAPIコールとルーティングのために取得します。

ここで私は

home.test.jsを書かれているコードがあるコンポーネント自体が正常に動作しますが、私はテストしたときに、私はすべての3つのテスト

TypeError: localStorage.getItem is not a function

でこのエラーを取得しています

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

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


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

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

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

    it('calls componentWillMount',() => { 
    sinon.spy(Home.prototype, 'componentWillMount'); 
    const wrapper = mount(<Home />); 

expect(Home.prototype.componentWillMount).to.have.property('callCount', 1); 
    Home.prototype.componentWillMount.restore(); 
    }); 
}); 

home.jsx

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) => { 
     if (reply.results.length > 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 (
     <div className='container'> 
      <Header logout={ this.logout } /> 
      <Content data={ this.state.content } /> 
     </div> 
    ); 
    } 
    return (
     <div className='container'> 
     <Header logout={ this.logout } /> 
     </div> 
    ); 
    } 
} 

export default Home; 

Answer 1

localStorageは、ユニットテストでは利用できないブラウザの一部です。あなたはそれをモックする必要があります。私は最近、同じ問題を持っていた私は、次の使用して、それを解決し

home.test.js

​​

Answer 2

："mock-local-storage": "^1.0.4"をあなたはlocalStorageオブジェクトに必要なメソッドを模擬することができます。パッケージはhereです。

このモジュールはのlocalStorageと私のためハッスル無料だったあなたのためののsessionStorageを、皮肉っ。プラグインを使用すると、redux-thunkとredux-sagasなどのミドルウェアを店舗に追加できます。

N.B.私はテストを実行するためにモカを使用しています。

他のフレームワークのために、あなたはまた、すでにとして（ユニットテスト用に独自のlocalStorageを実装し、いくつかのセットアップのテストファイルでグローバルに追加またはsinon.spy使用しようとすることができ、以下の構成

global.window = {} 
import localStorage from 'mock-local-storage' 
window.localStorage = global.localStorage