reactjs - 测试 react 组件时出错 - SecurityError

Question

我正在测试一个 react HOC，它检查本地存储中是否存在 token 。如果存在，它将用户重定向到 Home 组件，否则用户将被重定向到 Login 组件。

但是，我在上次测试调用 componentDidMount 的测试中遇到了这个奇怪的错误

SecurityError

at HistoryImpl._sharedPushAndReplaceState (node_modules/jsdom/lib/jsdom/living/window/History-impl.js:87:15)

at HistoryImpl.pushState (node_modules/jsdom/lib/jsdom/living/window/History-impl.js:69:10)

at History.pushState (node_modules/jsdom/lib/jsdom/living/generated/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();
  });
});

`

这是组件本身:

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

我想知道出了什么问题。也许与 react 路由器有关？

Answer 1

尝试设置testURL在你的 Jest 配置中。