錯誤測試反應組件 - SecurityError

Question

我正在測試反應HOC，它檢查本地存儲中是否存在令牌。如果存在，它會將用戶重定向到Home組件，否則用戶將被重定向到Login組件。

然而，我在最後的測試，在此檢測調用componentDidMount

的SecurityError

在HistoryImpl._sharedPushAndReplaceState（node_modules/jsdom/lib中/ jsdom /生活/窗口得到這個奇怪的錯誤/History-impl.js:87:15）

在HistoryImpl.pushState（node_modules/jsdom/LIB/jsdom /活/窗/歷史-impl.js：69：10）

在History.pushS泰特（node_modules/jsdom/LIB/jsdom /客廳/生成/ History.js：72：31）

這裏爲i寫的試驗：

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組態。