反応コンポーネントのテストでエラーが発生しました - SecurityError

Question

localstorageにトークンが存在するかどうかを確認するreact HOCをテストしています。存在する場合、ユーザーをホームコンポーネントにリダイレクトします。それ以外の場合は、ユーザーはログインコンポーネントにリダイレクトされます。

しかし、私はそれがcomponentDidMount

例外SecurityError

HistoryImpl._sharedPushAndReplaceStateで（node_modules/jsdom/libに/ jsdom /リビング/ウィンドウを呼び出すためのテスト最後のテストでは、この奇妙なエラーを取得していますHistory.pushSで10）

：HistoryImpl.pushStateで/History-impl.js:87:15）

（node_modules/jsdom/libに/ jsdom /リビング/ウィンドウ/歴史-impl.js：69テート（node_modules/jsdom/libに/ jsdom /リビング/生成/ 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(); 
    }); 
}); 

を

ここでは、私が書いたテストです

：

`

これは、コンポーネント自体でありますpp.jsx

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

class App extends Component { 
    componentDidMount() { 
    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です：

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" 
    } 

私が間違って何を思ったんだけど。おそらく反応ルータで何か？

Answer 1

あなたはbrowserHistoryを模擬することができ、これはまたあなたのコンポーネントの機能をスパイが、スパイからあなたを防ぐため、あなたが歴史を変えた別名、重要なことをテストしてみましょうだろう

jest.mock('react-router',()=>({browserHistory: {push: jest.fn()}})) 
import { browserHistory } from 'react-router'; 

it('calls componentDidMount',() = > { 
    const wrapper = mount(<App />); 
expect(browserHistory.push.mock.calls[0][0]).to.be('/home') 
    global.localStorage = { i2x_token: 'sometoken' } 
    const wrapper = mount(<App />); 
    expect(browserHistory.push.mock.calls[1][0]).to.be('/home') 
}); 

Answer 2

ご冗談でtestURLを設定してみてください構成。