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

beforeAll(() => { 
    global.localStorage = { 
     i2x_token: 'someToken', 
     getItem: function() { 
     return 'someToken' 
     } 
    }; 
}); 
....

출처

2017-04-25 06:40:44

을 사용할 수 있습니다 componentWillMount에 대한 것이 었습니다.) getItem 함수를 조롱했습니다. –

괜찮 았고 setItem은 어떻겠습니까? – rizvified

다음은 그 예입니다. https://gist.github.com/sanusart/c1558845350cc8d8cafbe3c903d46afc –

을 나는 최근에 같은 문제를했고 나는 다음과 같은 사용하여 해결 : "mock-local-storage": "^1.0.4"합니다. 패키지는 here입니다.

이 모듈은 로컬 스토리지 나를 위해 무료로 분주했다 당신을위한 sessionStorage을 조롱한다. 플러그 인을 사용하면 redux-thunk 및 redux-sagas과 같은 미들웨어를 저장소에 추가 할 수 있습니다.

N.B. 나는 모카를 사용하여 시험을합니다.

다른 프레임 워크를 들어 당신은 당신은 이미 당신 같은 (단위 테스트에 대한 자신의 로컬 스토리지를 구현하고 몇 가지 설정 테스트 파일에 글로벌에 추가 또는 sinon.spy 사용하려고 할 수있는 다음과 같은 구성

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

출처

2017-08-29 23:07:05 Tawanike

React Testing - TypeError : localStorage.getItem이 함수가 아닙니다.

답변

관련 문제