Fehler beim Testen der Komponente "react" - SecurityError

Question

Ich teste eine Reaktions-HOC, die prüft, ob ein Token im lokalen Speicher vorhanden ist oder nicht. Ist dies der Fall, wird der Benutzer an die Home-Komponente weitergeleitet. Andernfalls wird der Benutzer zur Login-Komponente weitergeleitet.

aber ich erhalte diesen seltsamen Fehler im letzten Test, bei dem es testet für den Aufruf componentDidMount

Security

bei HistoryImpl._sharedPushAndReplaceState (node_modules/jsdom/lib/jsdom/Wohn-/Fenstern /History-impl.js:87:15)

bei HistoryImpl.pushState (node_modules/jsdom/lib/jsdom/Wohn/Fenster/Historie-impl.js: 69: 10)

bei History.pushS tate (node_modules/jsdom/lib/jsdom/Wohn-/erzeugt/history.js: 72: 31)

hier ist der Test i schrieb:

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(); 
    }); 
}); 

`

und dies ist die Komponente selbst:

ein 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; 

das ist mein 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" 
    } 

Ich frage mich, was los ist. Irgendwas mit Router reagieren vielleicht?

Answer 1

Sie können browserHistory verspotten, das würden Sie auch von Spionage auf Ihre Komponenten Funktion verhindern, aber Spionage und lassen Sie die wichtige Sache testen, auch bekannt als, dass die Geschichte

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

geändert wurde Versuchen Sie, die testURL in Ihrer Jest Einstellung Aufbau.