React Testing - TypeError：localStorage.getItem不是函數

我在測試反應組件時遇到問題，該組件使用localstorage保存JWT令牌並根據身份驗證爲api調用和路由檢索它。React Testing - TypeError：localStorage.getItem不是函數

組件本身工作正常，但是當我測試，我在所有三個測試

TypeError: localStorage.getItem is not a function

這裏得到這個錯誤是我寫

home.test.js代碼

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;

來源

2017-04-25 rizvified

localStorage是您的瀏覽器的一部分，它不適用於單元測試，您需要模擬它。你可以嘲笑的對象localStorage必要的方法：

home.test.js

來源

2017-04-25 06:40:44

您也可以嘗試實現自己的localStorage的單元測試，並在一些設置的測試文件添加到全局或使用sinon.spy（因爲你已經爲componentWillMount做）嘲笑getItem函數 –

好吧，setItem會是什麼樣子？ – rizvified

下面是一個例子：https：//gist.github.com/sanusart/c1558845350cc8d8cafbe3c903d46afc –

最近我有同樣的問題，我用以下解決它："mock-local-storage": "^1.0.4"。該包可以在here找到。

該模塊嘲笑localStorage的和的sessionStorage對你來說，這是免費的喧囂對我來說。插件允許您將中間件添加到商店，例如redux-thunk和redux-sagas。

N.B.我正在使用摩卡來運行我的測試。

對於其他框架，你可以使用以下配置

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

來源

2017-08-29 23:07:05 Tawanike

React Testing - TypeError：localStorage.getItem不是函數

回答

相關問題